@scania/tegel-lite 0.0.1-beta.8 → 0.0.1-beta.9

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.
@@ -1246,13 +1246,24 @@
1246
1246
  position: relative;
1247
1247
  width: 100%;
1248
1248
  min-width: 208px;
1249
+ height: 56px;
1250
+ padding-bottom: 1px;
1249
1251
  border-radius: var(--text-field-border-radius);
1250
1252
  box-sizing: border-box;
1251
1253
  }
1252
1254
  .tl-text-field--no-min-width {
1253
1255
  min-width: auto;
1254
1256
  }
1255
- .tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
1257
+ .tl-text-field--lg {
1258
+ height: 56px;
1259
+ }
1260
+ .tl-text-field--md {
1261
+ height: 48px;
1262
+ }
1263
+ .tl-text-field--sm {
1264
+ height: 40px;
1265
+ }
1266
+ .tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
1256
1267
  content: "";
1257
1268
  position: absolute;
1258
1269
  top: 50%;
@@ -1267,16 +1278,16 @@
1267
1278
  transform: translateY(-50%);
1268
1279
  z-index: 1;
1269
1280
  }
1270
- .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside).tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon)::before {
1281
+ .tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__label):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon)::before {
1271
1282
  top: calc(50% + 24px);
1272
1283
  }
1273
- .tl-text-field--disabled {
1274
- pointer-events: none;
1284
+ .tl-text-field:has(.tl-text-field__input:disabled) {
1285
+ cursor: not-allowed;
1275
1286
  }
1276
1287
  .tl-text-field .tl-icon {
1277
1288
  background-color: var(--text-field-affix);
1278
1289
  }
1279
- .tl-text-field--disabled .tl-text-field .tl-icon {
1290
+ :has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
1280
1291
  background-color: var(--text-field-affix-disabled);
1281
1292
  }
1282
1293
 
@@ -1320,7 +1331,7 @@
1320
1331
  .tl-text-field__input:focus {
1321
1332
  box-shadow: inset var(--text-field-box-shadow-focus);
1322
1333
  }
1323
- .tl-text-field:hover .tl-text-field__input:not(:focus) {
1334
+ .tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
1324
1335
  box-shadow: inset var(--text-field-box-shadow-hover);
1325
1336
  }
1326
1337
  .tl-text-field--error .tl-text-field__input {
@@ -1329,46 +1340,45 @@
1329
1340
  .tl-text-field--error .tl-text-field__input:focus {
1330
1341
  box-shadow: inset var(--text-field-box-shadow-error-focus);
1331
1342
  }
1332
- .tl-text-field--error:hover .tl-text-field__input:not(:focus) {
1343
+ .tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
1333
1344
  box-shadow: inset var(--text-field-box-shadow-error-hover);
1334
1345
  }
1335
- .tl-text-field--success:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__input:not(:focus) {
1346
+ .tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
1336
1347
  box-shadow: inset var(--text-field-box-shadow-success);
1337
1348
  }
1338
- .tl-text-field--readonly .tl-text-field__input {
1349
+ .tl-text-field__input:disabled {
1350
+ box-shadow: none;
1351
+ background-color: var(--text-field-background-disabled);
1352
+ color: var(--text-field-text-disabled);
1353
+ cursor: not-allowed;
1354
+ pointer-events: none;
1355
+ }
1356
+ :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
1339
1357
  box-shadow: inset var(--text-field-box-shadow);
1340
1358
  }
1341
- .tl-text-field--readonly .tl-text-field__input:focus {
1359
+ :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
1342
1360
  box-shadow: inset var(--text-field-box-shadow-focus);
1343
1361
  }
1344
- .tl-text-field--readonly:hover .tl-text-field__input:not(:focus) {
1362
+ :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
1345
1363
  box-shadow: inset var(--text-field-box-shadow-hover);
1346
1364
  }
1347
- .tl-text-field--disabled .tl-text-field__input {
1348
- box-shadow: none;
1349
- background-color: var(--text-field-background-disabled);
1350
- color: var(--text-field-text-disabled);
1351
- }
1352
- .tl-text-field--readonly .tl-text-field__input {
1365
+ :has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
1353
1366
  user-select: auto;
1354
1367
  caret-color: transparent;
1355
1368
  cursor: default;
1356
1369
  pointer-events: none;
1357
1370
  }
1358
- .tl-text-field--readonly:not(.tl-text-field--disabled):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
1371
+ .tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
1359
1372
  padding-right: 54px;
1360
1373
  }
1361
1374
  .tl-text-field--lg .tl-text-field__input {
1362
1375
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
1363
- height: 56px;
1364
1376
  }
1365
1377
  .tl-text-field--md .tl-text-field__input {
1366
1378
  padding: var(--tds-spacing-element-16);
1367
- height: 48px;
1368
1379
  }
1369
1380
  .tl-text-field--sm .tl-text-field__input {
1370
1381
  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
1371
- height: 40px;
1372
1382
  }
1373
1383
  .tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
1374
1384
  padding-top: var(--tds-spacing-element-24);
@@ -1456,10 +1466,10 @@
1456
1466
  opacity: 0;
1457
1467
  visibility: hidden;
1458
1468
  }
1459
- .tl-text-field--label-inside.tl-text-field--disabled .tl-text-field__label {
1469
+ .tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
1460
1470
  color: var(--text-field-label-disabled);
1461
1471
  }
1462
- .tl-text-field:not(.tl-text-field--label-inside).tl-text-field--disabled .tl-text-field__label {
1472
+ .tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
1463
1473
  color: var(--text-field-label-disabled);
1464
1474
  }
1465
1475
 
@@ -1479,7 +1489,7 @@
1479
1489
  color: var(--text-field-helper);
1480
1490
  position: relative;
1481
1491
  }
1482
- .tl-text-field--disabled .tl-text-field__helper {
1492
+ :has(.tl-text-field__input:disabled) .tl-text-field__helper {
1483
1493
  color: var(--color-foreground-text-disabled);
1484
1494
  }
1485
1495
  .tl-text-field--error .tl-text-field__helper {
@@ -1498,16 +1508,16 @@
1498
1508
  mask-repeat: no-repeat;
1499
1509
  mask-position: center;
1500
1510
  }
1501
- .tl-text-field--error.tl-text-field--readonly .tl-text-field__helper {
1511
+ .tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper {
1502
1512
  padding-left: 0;
1503
1513
  }
1504
- .tl-text-field--error.tl-text-field--readonly .tl-text-field__helper::before {
1514
+ .tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
1505
1515
  display: none;
1506
1516
  }
1507
- .tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__helper {
1517
+ .tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
1508
1518
  color: var(--text-field-error);
1509
1519
  }
1510
- .tl-text-field--error.tl-text-field--disabled .tl-text-field__helper::before {
1520
+ .tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
1511
1521
  background-color: var(--color-foreground-text-disabled);
1512
1522
  }
1513
1523
 
@@ -1521,13 +1531,13 @@
1521
1531
  margin-left: auto;
1522
1532
  color: var(--text-field-textcounter);
1523
1533
  }
1524
- .tl-text-field--disabled .tl-text-field__charcounter {
1534
+ :has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
1525
1535
  color: var(--color-foreground-text-disabled);
1526
1536
  }
1527
- .tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter {
1537
+ .tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
1528
1538
  color: var(--text-field-error);
1529
1539
  }
1530
- .tl-text-field--error:not(.tl-text-field--readonly):not(.tl-text-field--disabled) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
1540
+ .tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
1531
1541
  color: var(--text-field-error);
1532
1542
  }
1533
1543
 
@@ -1559,16 +1569,16 @@
1559
1569
  .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__prefix--icon {
1560
1570
  transform: translateY(calc(-50% + 24px));
1561
1571
  }
1562
- .tl-text-field--disabled .tl-text-field__prefix--text, .tl-text-field--disabled .tl-text-field__prefix--icon {
1572
+ :has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
1563
1573
  color: var(--text-field-affix-disabled);
1564
1574
  }
1565
- .tl-text-field--disabled .tl-text-field__prefix--text > *, .tl-text-field--disabled .tl-text-field__prefix--icon > * {
1575
+ :has(.tl-text-field__input:disabled) .tl-text-field__prefix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon > * {
1566
1576
  color: var(--text-field-affix-disabled);
1567
1577
  }
1568
- .tl-text-field--disabled .tl-text-field__prefix--text .tl-icon, .tl-text-field--disabled .tl-text-field__prefix--icon .tl-icon {
1578
+ :has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
1569
1579
  background-color: var(--text-field-affix-disabled);
1570
1580
  }
1571
- .tl-text-field--disabled .tl-text-field__prefix--icon.tl-icon {
1581
+ :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
1572
1582
  background-color: var(--text-field-affix-disabled);
1573
1583
  }
1574
1584
 
@@ -1596,15 +1606,15 @@
1596
1606
  .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
1597
1607
  transform: translateY(calc(-50% + 24px));
1598
1608
  }
1599
- .tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
1609
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
1600
1610
  color: var(--text-field-affix-disabled);
1601
1611
  }
1602
- .tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
1612
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
1603
1613
  color: var(--text-field-affix-disabled);
1604
1614
  }
1605
- .tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
1606
- .tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
1607
- .tl-text-field--disabled .tl-text-field__suffix--icon > .tl-icon {
1615
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
1616
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
1617
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
1608
1618
  background-color: var(--text-field-affix-disabled) !important;
1609
1619
  }
1610
1620
 
@@ -1628,18 +1638,18 @@
1628
1638
  .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--text, .tl-text-field:has(.tl-text-field__label):not(.tl-text-field--label-inside) .tl-text-field__suffix--icon {
1629
1639
  transform: translateY(calc(-50% + 24px));
1630
1640
  }
1631
- .tl-text-field--disabled .tl-text-field__suffix--text, .tl-text-field--disabled .tl-text-field__suffix--icon {
1641
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
1632
1642
  color: var(--text-field-affix-disabled);
1633
1643
  }
1634
- .tl-text-field--disabled .tl-text-field__suffix--text > *, .tl-text-field--disabled .tl-text-field__suffix--icon > * {
1644
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
1635
1645
  color: var(--text-field-affix-disabled);
1636
1646
  }
1637
- .tl-text-field--disabled .tl-text-field__suffix--text .tl-icon,
1638
- .tl-text-field--disabled .tl-text-field__suffix--text > .tl-icon, .tl-text-field--disabled .tl-text-field__suffix--icon .tl-icon,
1639
- .tl-text-field--disabled .tl-text-field__suffix--icon > .tl-icon {
1647
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
1648
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
1649
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
1640
1650
  background-color: var(--text-field-affix-disabled);
1641
1651
  }
1642
- .tl-text-field--disabled .tl-text-field__suffix--icon.tl-icon {
1652
+ :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
1643
1653
  background-color: var(--text-field-affix-disabled);
1644
1654
  }
1645
1655
 
File without changes
@@ -61,13 +61,13 @@
61
61
  .tl-textarea--no-min-width {
62
62
  min-width: auto;
63
63
  }
64
- .tl-textarea--disabled {
65
- pointer-events: none;
64
+ .tl-textarea:has(.tl-textarea__input:disabled) {
65
+ cursor: not-allowed;
66
66
  }
67
- .tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon)::before {
67
+ .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
68
68
  content: "";
69
69
  position: absolute;
70
- top: 19px;
70
+ top: 18px;
71
71
  right: 18px;
72
72
  width: 16px;
73
73
  height: 16px;
@@ -78,14 +78,27 @@
78
78
  mask-position: center;
79
79
  z-index: 1;
80
80
  }
81
- .tl-textarea:not(.tl-textarea--label-inside).tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon)::before {
81
+ .traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
82
+ top: 20px;
83
+ right: 16px;
84
+ }
85
+ .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
86
+ top: 42px;
87
+ }
88
+ .traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
82
89
  top: 44px;
83
90
  }
91
+ .tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
92
+ top: 17px;
93
+ }
94
+ .traton .tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
95
+ top: 19px;
96
+ }
84
97
  .tl-textarea::after {
85
98
  content: "";
86
99
  position: absolute;
87
- bottom: 5px;
88
- right: 2px;
100
+ bottom: 3px;
101
+ right: 3px;
89
102
  width: 12px;
90
103
  height: 12px;
91
104
  background-color: var(--textarea-resize-icon);
@@ -97,14 +110,14 @@
97
110
  z-index: 1;
98
111
  }
99
112
  .traton .tl-textarea::after {
100
- bottom: 7px;
113
+ bottom: 5px;
101
114
  right: 4px;
102
115
  }
103
116
  .tl-textarea:not(.tl-textarea--label-inside)::after {
104
- bottom: 7px;
117
+ bottom: 5px;
105
118
  }
106
119
  .traton .tl-textarea:not(.tl-textarea--label-inside)::after {
107
- bottom: 9px;
120
+ bottom: 5px;
108
121
  }
109
122
  .tl-textarea:has(.tl-textarea__bottom)::after {
110
123
  bottom: 25px;
@@ -112,7 +125,7 @@
112
125
  .traton .tl-textarea:has(.tl-textarea__bottom)::after {
113
126
  bottom: 27px;
114
127
  }
115
- .tl-textarea--disabled::after {
128
+ .tl-textarea :has(.tl-textarea__input:disabled)::after {
116
129
  background-color: var(--color-foreground-text-disabled);
117
130
  }
118
131
 
@@ -165,7 +178,7 @@
165
178
  .tl-textarea__input::-webkit-resizer {
166
179
  display: none;
167
180
  }
168
- .tl-textarea:hover .tl-textarea__input:not(:focus) {
181
+ .tl-textarea:hover .tl-textarea__input:not(:focus):not(:disabled) {
169
182
  box-shadow: inset var(--textarea-box-shadow-hover);
170
183
  }
171
184
  .tl-textarea--error .tl-textarea__input {
@@ -174,25 +187,27 @@
174
187
  .tl-textarea--error .tl-textarea__input:focus {
175
188
  box-shadow: inset var(--textarea-box-shadow-error-focus);
176
189
  }
177
- .tl-textarea--error:hover .tl-textarea__input:not(:focus) {
190
+ .tl-textarea--error:hover .tl-textarea__input:not(:focus):not(:disabled) {
178
191
  box-shadow: inset var(--textarea-box-shadow-error-hover);
179
192
  }
180
- .tl-textarea--success:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__input:not(:focus) {
193
+ .tl-textarea--success:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
181
194
  box-shadow: inset var(--textarea-box-shadow-success);
182
195
  }
183
- .tl-textarea--readonly .tl-textarea__input {
196
+ .tl-textarea__input:disabled {
197
+ box-shadow: none;
198
+ color: var(--textarea-text-disabled);
199
+ cursor: not-allowed;
200
+ pointer-events: none;
201
+ }
202
+ :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
184
203
  box-shadow: inset var(--textarea-box-shadow);
185
204
  }
186
- .tl-textarea--readonly .tl-textarea__input:focus {
205
+ :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
187
206
  box-shadow: inset var(--textarea-box-shadow-focus);
188
207
  }
189
- .tl-textarea--readonly:hover .tl-textarea__input:not(:focus) {
208
+ :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
190
209
  box-shadow: inset var(--textarea-box-shadow-hover);
191
210
  }
192
- .tl-textarea--disabled .tl-textarea__input {
193
- box-shadow: none;
194
- color: var(--textarea-text-disabled);
195
- }
196
211
  .tl-textarea--label-inside .tl-textarea__input {
197
212
  padding-top: 26px;
198
213
  padding-bottom: 15px;
@@ -201,16 +216,16 @@
201
216
  color: transparent;
202
217
  transform: translateY(1px);
203
218
  }
204
- .tl-textarea--disabled.tl-textarea--label-inside .tl-textarea__input::placeholder {
205
- color: var(--textarea-placeholder) !important;
219
+ .tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
220
+ color: var(--textarea-placeholder-disabled) !important;
206
221
  }
207
- .tl-textarea--readonly .tl-textarea__input {
222
+ :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
208
223
  user-select: auto;
209
224
  caret-color: transparent;
210
225
  cursor: default;
211
226
  pointer-events: none;
212
227
  }
213
- .tl-textarea--readonly:not(.tl-textarea--disabled):not(.tl-textarea--hide-readonly-icon) .tl-textarea__input {
228
+ :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
214
229
  padding-right: 50px;
215
230
  }
216
231
 
@@ -242,7 +257,7 @@
242
257
  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
243
258
  z-index: 1;
244
259
  }
245
- .tl-textarea--label-inside.tl-textarea--disabled .tl-textarea__label {
260
+ .tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
246
261
  font-family: var(--detail-07-font-family);
247
262
  font-size: var(--detail-07-font-size);
248
263
  line-height: var(--detail-07-line-height);
@@ -253,7 +268,7 @@
253
268
  color: var(--textarea-label-disabled);
254
269
  transform: translateY(0);
255
270
  }
256
- .tl-textarea:not(.tl-textarea--label-inside).tl-textarea--disabled .tl-textarea__label {
271
+ .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
257
272
  color: var(--textarea-label-disabled);
258
273
  }
259
274
 
@@ -273,7 +288,7 @@
273
288
  color: var(--textarea-helper);
274
289
  position: relative;
275
290
  }
276
- .tl-textarea--disabled .tl-textarea__helper {
291
+ :has(.tl-textarea__input:disabled) .tl-textarea__helper {
277
292
  color: var(--color-foreground-text-disabled);
278
293
  }
279
294
  .tl-textarea--error .tl-textarea__helper {
@@ -292,16 +307,16 @@
292
307
  mask-repeat: no-repeat;
293
308
  mask-position: center;
294
309
  }
295
- .tl-textarea--error.tl-textarea--readonly .tl-textarea__helper {
310
+ .tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper {
296
311
  padding-left: 0;
297
312
  }
298
- .tl-textarea--error.tl-textarea--readonly .tl-textarea__helper::before {
313
+ .tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
299
314
  display: none;
300
315
  }
301
- .tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__helper {
316
+ .tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__helper {
302
317
  color: var(--textarea-error);
303
318
  }
304
- .tl-textarea--error.tl-textarea--disabled .tl-textarea__helper::before {
319
+ .tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
305
320
  background-color: var(--color-foreground-text-disabled);
306
321
  }
307
322
 
@@ -315,13 +330,13 @@
315
330
  margin-left: auto;
316
331
  color: var(--textarea-textcounter);
317
332
  }
318
- .tl-textarea--disabled .tl-textarea__charcounter {
333
+ :has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
319
334
  color: var(--color-foreground-text-disabled);
320
335
  }
321
- .tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__charcounter {
336
+ .tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
322
337
  color: var(--textarea-error);
323
338
  }
324
- .tl-textarea--error:not(.tl-textarea--readonly):not(.tl-textarea--disabled) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
339
+ .tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
325
340
  color: var(--textarea-error);
326
341
  }
327
342
 
@@ -8,6 +8,10 @@
8
8
  --toggle-border-focus: var(--color-foreground-border-accent-focus);
9
9
  }
10
10
 
11
+ .tl-toggle:has(input[type=checkbox]:disabled) {
12
+ cursor: not-allowed;
13
+ }
14
+
11
15
  .tl-toggle__input {
12
16
  appearance: initial;
13
17
  margin: 0;
@@ -65,6 +69,7 @@
65
69
  }
66
70
  .tl-toggle__input:disabled {
67
71
  pointer-events: none;
72
+ cursor: not-allowed;
68
73
  }
69
74
  .tl-toggle__input:disabled::before {
70
75
  background-color: var(--toggle-disabled);
@@ -113,9 +118,10 @@
113
118
  color: var(--toggle-text);
114
119
  margin-bottom: 12px;
115
120
  }
116
- .tl-toggle__headline--disabled {
121
+ :has(input[type=checkbox]:disabled) .tl-toggle__headline {
117
122
  color: var(--toggle-disabled);
118
123
  user-select: none;
124
+ cursor: not-allowed;
119
125
  }
120
126
 
121
127
  .tl-toggle__label {
@@ -132,7 +138,8 @@
132
138
  vertical-align: middle;
133
139
  padding-left: 8px;
134
140
  }
135
- .tl-toggle__label--disabled {
141
+ input[type=checkbox]:disabled ~ .tl-toggle__label {
136
142
  color: var(--toggle-disabled);
137
143
  pointer-events: none;
144
+ cursor: not-allowed;
138
145
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.0.1-beta.8",
3
+ "version": "0.0.1-beta.9",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -63,7 +63,11 @@
63
63
  "./tl-radiobutton.css": "./dist/tl-radiobutton.css",
64
64
  "./tl-folder-tabs.css": "./dist/tl-folder-tabs.css",
65
65
  "./tl-inline-tabs.css": "./dist/tl-inline-tabs.css",
66
- "./tl-navigation-tabs.css": "./dist/tl-navigation-tabs.css"
66
+ "./tl-navigation-tabs.css": "./dist/tl-navigation-tabs.css",
67
+ "./tl-folder-tab.css": "./dist/tl-folder-tab.css",
68
+ "./tl-inline-tab.css": "./dist/tl-inline-tab.css",
69
+ "./tl-navigation-tab.css": "./dist/tl-navigation-tab.css",
70
+ "./tl-textarea-mixins.css": "./dist/tl-textarea-mixins.css"
67
71
  },
68
72
  "repository": {
69
73
  "type": "git",
@@ -72,8 +76,11 @@
72
76
  "publishConfig": {
73
77
  "access": "public"
74
78
  },
79
+ "files": [
80
+ "dist/"
81
+ ],
75
82
  "scripts": {
76
- "prepublishOnly": "echo 'Warning: Run npm run build:lte from root before publishing'",
83
+ "prepublishOnly": "echo 'Warning: Run npm run build:tegel-lite from root before publishing'",
77
84
  "test": "npx playwright test"
78
85
  },
79
86
  "devDependencies": {