@planningcenter/tapestry 4.2.0-rc.0 → 4.2.0-rc.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.
@@ -677,6 +677,243 @@
677
677
  [data-padding-inline-xl="7"]{ padding-inline:var(--t-spacing-7); }
678
678
  }
679
679
 
680
+ .tds-button-group{
681
+ display:inline-flex;
682
+ }
683
+ .tds-button-group > .tds-btn{
684
+ --tds-button-group-item-z-index:1;
685
+
686
+ position:relative;
687
+ z-index:var(--tds-button-group-item-z-index);
688
+ border-radius:0;
689
+ }
690
+ :is(.tds-button-group > .tds-btn):not(:first-child){
691
+ margin-inline-start:calc(var(--tds-btn-border-width) * -1);
692
+ }
693
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
694
+ position:absolute;
695
+ inset-block:calc(var(--tds-btn-border-width) * -1);
696
+ width:var(--tds-btn-border-width);
697
+ pointer-events:none;
698
+ content:"";
699
+ background-color:var(--t-border-color-white);
700
+ }
701
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
702
+ inset-inline-start:calc(var(--tds-btn-border-width) * -1);
703
+ }
704
+ :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
705
+ inset-inline-end:calc(var(--tds-btn-border-width) * -1);
706
+ }
707
+ :is(.tds-button-group > .tds-btn):hover{
708
+ --tds-button-group-item-z-index:2;
709
+ }
710
+ :is(.tds-button-group > .tds-btn):focus-visible{
711
+ --tds-button-group-item-z-index:5;
712
+ }
713
+ .tds-button-group > .tds-btn:first-child{
714
+ border-start-start-radius:var(--tds-btn-border-radius);
715
+ border-end-start-radius:var(--tds-btn-border-radius);
716
+ }
717
+ .tds-button-group > .tds-btn:last-child{
718
+ border-start-end-radius:var(--tds-btn-border-radius);
719
+ border-end-end-radius:var(--tds-btn-border-radius);
720
+ }
721
+
722
+ .tds-checkbox{
723
+ --tds-checkbox-font-size:var(--t-font-size-md);
724
+ --tds-checkbox-cursor:pointer;
725
+ --tds-checkbox-line-height:1.4;
726
+ --tds-checkbox-transition-property:background-color, border-color;
727
+
728
+ --tds-checkbox-input-size:var(--t-element-size-md);
729
+ --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
730
+ --tds-checkbox-input-border-color:var(--t-form-border-color);
731
+ --tds-checkbox-input-background-color:var(--t-form-background-color);
732
+
733
+ --tds-checkbox-input-icon:none;
734
+ --tds-checkbox-input-icon-visibility:hidden;
735
+ --tds-checkbox-input-icon-opacity:0;
736
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
737
+
738
+ --tds-checkbox-label-color:var(--t-form-color);
739
+
740
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
741
+ --tds-checkbox-description-line-height:1.35;
742
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
743
+ --tds-checkbox-description-invalid-icon-display:none;
744
+
745
+ position:relative;
746
+ display:inline-grid;
747
+ grid-template-columns:auto;
748
+ grid-auto-columns:1fr;
749
+ gap:var(--t-spacing-fourth) 0;
750
+ line-height:var(--tds-checkbox-line-height);
751
+ -webkit-user-select:none;
752
+ -moz-user-select:none;
753
+ user-select:none;
754
+ }
755
+
756
+ .tds-checkbox label{
757
+ grid-area:1 / 2;
758
+ padding-inline-start:var(--t-spacing-1);
759
+ font-size:var(--tds-checkbox-font-size);
760
+ font-weight:var(--t-font-weight-normal);
761
+ color:var(--tds-checkbox-label-color);
762
+ cursor:var(--tds-checkbox-cursor);
763
+ }
764
+
765
+ .tds-checkbox tds-indeterminate{
766
+ display:flex;
767
+ }
768
+
769
+ .tds-checkbox input[type="checkbox"]{
770
+ position:relative;
771
+ width:1em;
772
+ height:1em;
773
+ margin:calc((1lh - 1em) / 2) 0 0;
774
+ font-size:var(--tds-checkbox-font-size);
775
+ line-height:inherit;
776
+ -webkit-appearance:none;
777
+ -moz-appearance:none;
778
+ appearance:none;
779
+ cursor:var(--tds-checkbox-cursor);
780
+ background-color:var(--tds-checkbox-input-background-color);
781
+ border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
782
+ border-radius:var(--tds-checkbox-input-border-radius);
783
+ transition-timing-function:var(--t-ease-in-out);
784
+ transition-duration:var(--t-duration-200);
785
+ transition-property:var(--tds-checkbox-transition-property);
786
+ }
787
+
788
+ :is(.tds-checkbox input[type="checkbox"])::before{
789
+ position:absolute;
790
+ top:50%;
791
+ left:50%;
792
+ visibility:var(--tds-checkbox-input-icon-visibility);
793
+ width:100%;
794
+ height:100%;
795
+ content:"";
796
+ background-color:var(--tds-checkbox-input-icon-fill);
797
+ border-radius:var(--tds-checkbox-input-border-radius);
798
+ opacity:var(--tds-checkbox-input-icon-opacity);
799
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
800
+ mask-image:var(--tds-checkbox-input-icon);
801
+ -webkit-mask-repeat:no-repeat;
802
+ mask-repeat:no-repeat;
803
+ -webkit-mask-size:contain;
804
+ mask-size:contain;
805
+ transform:translate(-50%, -50%);
806
+ }
807
+
808
+ :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
809
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
810
+ --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
811
+ }
812
+
813
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
814
+ outline:var(--t-focus-ring-outline);
815
+ outline-offset:var(--t-focus-ring-offset);
816
+ }
817
+
818
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
819
+ pointer-events:none;
820
+ }
821
+
822
+ @media (prefers-reduced-motion: reduce){
823
+
824
+ .tds-checkbox input[type="checkbox"]{
825
+ --tds-checkbox-transition-property:none;
826
+ }
827
+ }
828
+
829
+ .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
830
+ --tds-checkbox-input-background-color:var(--t-fill-color-control);
831
+ --tds-checkbox-input-border-color:var(--t-border-color-control-info);
832
+ --tds-checkbox-input-icon-visibility:visible;
833
+ --tds-checkbox-input-icon-opacity:1;
834
+ }
835
+
836
+ :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
837
+ --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
838
+ --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
839
+ }
840
+
841
+ .tds-checkbox:has(input:checked){
842
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
843
+ }
844
+
845
+ .tds-checkbox:has(input:indeterminate){
846
+ --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
847
+ }
848
+
849
+ .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
850
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
851
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
852
+ --tds-checkbox-description-invalid-icon-display:inline-block;
853
+ }
854
+
855
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
856
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
857
+ --tds-checkbox-input-background-color:var(--t-form-background-color-error);
858
+ }
859
+
860
+ :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
861
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error);
862
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error);
863
+ }
864
+
865
+ :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
866
+ --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
867
+ --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
868
+ }
869
+
870
+ .tds-checkbox:has(input:required) label::after{
871
+ margin-left:.25ch;
872
+ color:var(--t-text-color-status-error);
873
+ content:"*";
874
+ }
875
+
876
+ .tds-checkbox:has(input:disabled){
877
+ --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
878
+ --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
879
+
880
+ --tds-checkbox-label-color:var(--t-form-color-disabled);
881
+ --tds-checkbox-description-color:var(--t-form-color-disabled);
882
+ --tds-checkbox-cursor:not-allowed;
883
+ }
884
+
885
+ .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
886
+ --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
887
+ }
888
+
889
+ .tds-checkbox-description{
890
+ display:flex;
891
+ grid-area:2 / 2;
892
+ gap:var(--t-spacing-half);
893
+ align-items:flex-start;
894
+ padding-inline-start:var(--t-spacing-1);
895
+ margin:0;
896
+ font-size:var(--tds-checkbox-description-font-size);
897
+ line-height:var(--tds-checkbox-description-line-height);
898
+ color:var(--tds-checkbox-description-color);
899
+ cursor:text;
900
+ }
901
+
902
+ .tds-checkbox-description .tds-checkbox-description-invalid-icon{
903
+ display:var(--tds-checkbox-description-invalid-icon-display);
904
+ flex-shrink:0;
905
+ margin-top:calc(.5lh - .5em);
906
+ line-height:var(--tds-checkbox-description-line-height);
907
+ }
908
+
909
+ .tds-checkbox--sm{
910
+ --tds-checkbox-line-height:1.35;
911
+ --tds-checkbox-input-size:var(--t-element-size-sm);
912
+ --tds-checkbox-font-size:var(--t-font-size-sm);
913
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
914
+ --tds-checkbox-description-line-height:1.3;
915
+ }
916
+
680
917
 
681
918
  @media (prefers-reduced-motion: no-preference){
682
919
 
@@ -1316,247 +1553,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1316
1553
  }
1317
1554
  }
1318
1555
 
1319
- .tds-button-group{
1320
- display:inline-flex;
1321
- }
1322
- .tds-button-group > .tds-btn{
1323
- --tds-button-group-item-z-index:1;
1324
-
1325
- position:relative;
1326
- z-index:var(--tds-button-group-item-z-index);
1327
- border-radius:0;
1328
- }
1329
- :is(.tds-button-group > .tds-btn):not(:first-child){
1330
- margin-inline-start:calc(var(--tds-btn-border-width) * -1);
1331
- }
1332
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before,:is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1333
- position:absolute;
1334
- inset-block:calc(var(--tds-btn-border-width) * -1);
1335
- width:var(--tds-btn-border-width);
1336
- pointer-events:none;
1337
- content:"";
1338
- background-color:var(--t-border-color-white);
1339
- }
1340
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:first-child)::before{
1341
- inset-inline-start:calc(var(--tds-btn-border-width) * -1);
1342
- }
1343
- :is(.tds-button-group > .tds-btn):is(.tds-btn--interaction,.tds-btn--neutral,.tds-btn--staff-only):not(:last-child)::after{
1344
- inset-inline-end:calc(var(--tds-btn-border-width) * -1);
1345
- }
1346
- :is(.tds-button-group > .tds-btn):hover{
1347
- --tds-button-group-item-z-index:2;
1348
- }
1349
- :is(.tds-button-group > .tds-btn):focus-visible{
1350
- --tds-button-group-item-z-index:5;
1351
- }
1352
- .tds-button-group > .tds-btn:first-child{
1353
- border-start-start-radius:var(--tds-btn-border-radius);
1354
- border-end-start-radius:var(--tds-btn-border-radius);
1355
- }
1356
- .tds-button-group > .tds-btn:last-child{
1357
- border-start-end-radius:var(--tds-btn-border-radius);
1358
- border-end-end-radius:var(--tds-btn-border-radius);
1359
- }
1360
-
1361
- .tds-checkbox{
1362
- --tds-checkbox-font-size:var(--t-font-size-md);
1363
- --tds-checkbox-cursor:pointer;
1364
- --tds-checkbox-line-height:1.4;
1365
- --tds-checkbox-transition-property:background-color, border-color;
1366
-
1367
- --tds-checkbox-input-size:var(--t-element-size-md);
1368
- --tds-checkbox-input-border-radius:var(--t-border-radius-sm);
1369
- --tds-checkbox-input-border-color:var(--t-form-border-color);
1370
- --tds-checkbox-input-background-color:var(--t-form-background-color);
1371
-
1372
- --tds-checkbox-input-icon:none;
1373
- --tds-checkbox-input-icon-visibility:hidden;
1374
- --tds-checkbox-input-icon-opacity:0;
1375
- --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
1376
-
1377
- --tds-checkbox-label-color:var(--t-form-color);
1378
-
1379
- --tds-checkbox-description-font-size:var(--t-font-size-sm);
1380
- --tds-checkbox-description-line-height:1.35;
1381
- --tds-checkbox-description-color:var(--t-text-color-secondary);
1382
- --tds-checkbox-description-invalid-icon-display:none;
1383
-
1384
- position:relative;
1385
- display:inline-grid;
1386
- grid-template-columns:auto;
1387
- grid-auto-columns:1fr;
1388
- gap:var(--t-spacing-fourth) 0;
1389
- line-height:var(--tds-checkbox-line-height);
1390
- -webkit-user-select:none;
1391
- -moz-user-select:none;
1392
- user-select:none;
1393
- }
1394
-
1395
- .tds-checkbox label{
1396
- grid-area:1 / 2;
1397
- padding-inline-start:var(--t-spacing-1);
1398
- font-size:var(--tds-checkbox-font-size);
1399
- font-weight:var(--t-font-weight-normal);
1400
- color:var(--tds-checkbox-label-color);
1401
- cursor:var(--tds-checkbox-cursor);
1402
- }
1403
-
1404
- .tds-checkbox tds-indeterminate{
1405
- display:flex;
1406
- }
1407
-
1408
- .tds-checkbox input[type="checkbox"]{
1409
- position:relative;
1410
- width:1em;
1411
- height:1em;
1412
- margin:calc((1lh - 1em) / 2) 0 0;
1413
- font-size:var(--tds-checkbox-font-size);
1414
- line-height:inherit;
1415
- -webkit-appearance:none;
1416
- -moz-appearance:none;
1417
- appearance:none;
1418
- cursor:var(--tds-checkbox-cursor);
1419
- background-color:var(--tds-checkbox-input-background-color);
1420
- border:var(--t-form-border-width) solid var(--tds-checkbox-input-border-color);
1421
- border-radius:var(--tds-checkbox-input-border-radius);
1422
- transition-timing-function:var(--t-ease-in-out);
1423
- transition-duration:var(--t-duration-200);
1424
- transition-property:var(--tds-checkbox-transition-property);
1425
- }
1426
-
1427
- :is(.tds-checkbox input[type="checkbox"])::before{
1428
- position:absolute;
1429
- top:50%;
1430
- left:50%;
1431
- visibility:var(--tds-checkbox-input-icon-visibility);
1432
- width:100%;
1433
- height:100%;
1434
- content:"";
1435
- background-color:var(--tds-checkbox-input-icon-fill);
1436
- border-radius:var(--tds-checkbox-input-border-radius);
1437
- opacity:var(--tds-checkbox-input-icon-opacity);
1438
- -webkit-mask-image:var(--tds-checkbox-input-icon);
1439
- mask-image:var(--tds-checkbox-input-icon);
1440
- -webkit-mask-repeat:no-repeat;
1441
- mask-repeat:no-repeat;
1442
- -webkit-mask-size:contain;
1443
- mask-size:contain;
1444
- transform:translate(-50%, -50%);
1445
- }
1446
-
1447
- :is(.tds-checkbox input[type="checkbox"]):hover:not(:disabled){
1448
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1449
- --tds-checkbox-input-background-color:var(--t-fill-color-button-interaction-outline-hover);
1450
- }
1451
-
1452
- :is(.tds-checkbox input[type="checkbox"]):focus-visible{
1453
- outline:var(--t-focus-ring-outline);
1454
- outline-offset:var(--t-focus-ring-offset);
1455
- }
1456
-
1457
- :is(.tds-checkbox input[type="checkbox"]):disabled{
1458
- pointer-events:none;
1459
- }
1460
-
1461
- @media (prefers-reduced-motion: reduce){
1462
-
1463
- .tds-checkbox input[type="checkbox"]{
1464
- --tds-checkbox-transition-property:none;
1465
- }
1466
- }
1467
-
1468
- .tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate){
1469
- --tds-checkbox-input-background-color:var(--t-fill-color-control);
1470
- --tds-checkbox-input-border-color:var(--t-border-color-control-info);
1471
- --tds-checkbox-input-icon-visibility:visible;
1472
- --tds-checkbox-input-icon-opacity:1;
1473
- }
1474
-
1475
- :is(.tds-checkbox:has(input:checked),.tds-checkbox:has(input:indeterminate)) input:hover:not(:disabled){
1476
- --tds-checkbox-input-border-color:var(--t-fill-color-interaction-hover);
1477
- --tds-checkbox-input-background-color:var(--t-fill-color-interaction-hover);
1478
- }
1479
-
1480
- .tds-checkbox:has(input:checked){
1481
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1482
- }
1483
-
1484
- .tds-checkbox:has(input:indeterminate){
1485
- --tds-checkbox-input-icon:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1486
- }
1487
-
1488
- .tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid{
1489
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1490
- --tds-checkbox-description-color:var(--t-text-color-status-error);
1491
- --tds-checkbox-description-invalid-icon-display:inline-block;
1492
- }
1493
-
1494
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:hover:not(:disabled){
1495
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1496
- --tds-checkbox-input-background-color:var(--t-form-background-color-error);
1497
- }
1498
-
1499
- :is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate{
1500
- --tds-checkbox-input-border-color:var(--t-form-border-color-error);
1501
- --tds-checkbox-input-background-color:var(--t-form-border-color-error);
1502
- }
1503
-
1504
- :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
1505
- --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
1506
- --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
1507
- }
1508
-
1509
- .tds-checkbox:has(input:required) label::after{
1510
- margin-left:.25ch;
1511
- color:var(--t-text-color-status-error);
1512
- content:"*";
1513
- }
1514
-
1515
- .tds-checkbox:has(input:disabled){
1516
- --tds-checkbox-input-background-color:var(--t-form-background-color-disabled);
1517
- --tds-checkbox-input-border-color:var(--t-form-border-color-disabled);
1518
-
1519
- --tds-checkbox-label-color:var(--t-form-color-disabled);
1520
- --tds-checkbox-description-color:var(--t-form-color-disabled);
1521
- --tds-checkbox-cursor:not-allowed;
1522
- }
1523
-
1524
- .tds-checkbox:has(input:disabled) input:checked,.tds-checkbox:has(input:disabled) input:indeterminate{
1525
- --tds-checkbox-input-background-color:var(--t-border-color-control-disabled);
1526
- }
1527
-
1528
- .tds-checkbox-description{
1529
- display:flex;
1530
- grid-area:2 / 2;
1531
- gap:var(--t-spacing-half);
1532
- align-items:flex-start;
1533
- padding-inline-start:var(--t-spacing-1);
1534
- margin:0;
1535
- font-size:var(--tds-checkbox-description-font-size);
1536
- line-height:var(--tds-checkbox-description-line-height);
1537
- color:var(--tds-checkbox-description-color);
1538
- cursor:text;
1539
- }
1540
-
1541
- .tds-checkbox-description .tds-checkbox-description-invalid-icon{
1542
- display:var(--tds-checkbox-description-invalid-icon-display);
1543
- flex-shrink:0;
1544
- margin-top:calc(.5lh - .5em);
1545
- line-height:var(--tds-checkbox-description-line-height);
1546
- }
1547
-
1548
- .tds-checkbox--sm{
1549
- --tds-checkbox-line-height:1.35;
1550
- --tds-checkbox-input-size:var(--t-element-size-sm);
1551
- --tds-checkbox-font-size:var(--t-font-size-sm);
1552
- --tds-checkbox-description-font-size:var(--t-font-size-xs);
1553
- --tds-checkbox-description-line-height:1.3;
1554
- }
1555
-
1556
- .tds-checkbox-group{
1557
- --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
- --tds-checkbox-group-line-height:1.4;
1559
- --tds-checkbox-group-gap:var(--t-spacing-1);
1556
+ .tds-checkbox-group{
1557
+ --tds-checkbox-group-font-size:var(--t-font-size-md);
1558
+ --tds-checkbox-group-line-height:1.4;
1559
+ --tds-checkbox-group-gap:var(--t-spacing-1);
1560
1560
 
1561
1561
  --tds-checkbox-group-description-font-size:var(--t-font-size-sm);
1562
1562
  --tds-checkbox-group-description-line-height:1.35;
@@ -1602,212 +1602,51 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1602
1602
  margin-top:var(--t-spacing-1);
1603
1603
  }
1604
1604
 
1605
- .tds-checkbox-group-description{
1606
- display:flex;
1607
- gap:var(--t-spacing-half);
1608
- align-items:flex-start;
1609
- margin:var(--t-spacing-fourth) 0 0;
1610
- font-size:var(--tds-checkbox-group-description-font-size);
1611
- line-height:var(--tds-checkbox-group-description-line-height);
1612
- color:var(--tds-checkbox-group-description-color);
1613
- cursor:text;
1614
- }
1615
-
1616
- .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
- display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
- flex-shrink:0;
1619
- margin-top:calc(.5lh - .5em);
1620
- line-height:var(--tds-checkbox-group-description-line-height);
1621
- }
1622
-
1623
- .tds-checkbox-group--sm{
1624
- --tds-checkbox-group-line-height:1.35;
1625
- --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
- --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
- --tds-checkbox-group-description-line-height:1.3;
1628
- }
1629
-
1630
-
1631
- :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1632
- -webkit-appearance:none;
1633
- appearance:none;
1634
- }
1635
-
1636
- [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1637
- inline-size:1em;
1638
- block-size:2em;
1639
- }
1640
- @supports (field-sizing: content){
1641
- .tds-input--auto-width{
1642
- inline-size:-moz-fit-content;
1643
- inline-size:fit-content;
1644
- min-inline-size:min(100%, 122px);
1645
- }
1646
-
1647
- .tds-input--auto-width input{
1648
- field-sizing:content;
1649
- inline-size:auto;
1650
- }
1651
- }
1652
-
1653
- .tds-modal-overlay{
1654
- --tds-modal-min-margin-block:var(--t-spacing-3);
1655
-
1656
- position:fixed;
1657
- inset:0;
1658
- z-index:1000;
1659
- display:grid;
1660
- grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1661
- justify-items:center;
1662
- overflow-y:auto;
1663
- background:hsl(0 0% 0% / 40%);
1664
- }
1665
-
1666
- .tds-modal-overlay[data-entering]{
1667
- animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1668
- }
1669
-
1670
- .tds-modal-overlay[data-exiting]{
1671
- animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1672
- }
1673
-
1674
- @keyframes tds-modal-overlay-fade{
1675
- from{
1676
- opacity:0;
1677
- }
1678
- }
1679
-
1680
- .tds-modal-frame{
1681
- --tds-modal-width:600px;
1682
- --tds-modal-edge-margin-inline:var(--t-spacing-3);
1683
- display:flex;
1684
-
1685
- grid-row:2;
1686
- justify-content:center;
1687
- width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1688
- }
1689
-
1690
- .tds-modal-frame[data-entering]{
1691
- animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1692
- }
1693
-
1694
- .tds-modal-frame[data-exiting]{
1695
- animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1696
- }
1697
-
1698
- .tds-modal-frame--sm{
1699
- --tds-modal-width:400px;
1700
- }
1701
-
1702
- .tds-modal-frame--lg{
1703
- --tds-modal-width:800px;
1704
- }
1705
-
1706
- .tds-modal-frame--xl{
1707
- --tds-modal-width:1000px;
1708
- }
1709
-
1710
- @keyframes tds-modal-zoom{
1711
- from{
1712
- opacity:0;
1713
- scale:.96;
1714
- }
1715
- }
1716
-
1717
- @media (prefers-reduced-motion: reduce){
1718
- .tds-modal-overlay[data-entering],
1719
- .tds-modal-overlay[data-exiting],
1720
- .tds-modal-frame[data-entering],
1721
- .tds-modal-frame[data-exiting]{
1722
- animation:none;
1723
- }
1724
- }
1725
-
1726
- .tds-modal{
1727
- display:flex;
1728
- flex-direction:column;
1729
- width:100%;
1730
- padding-block-start:var(--t-spacing-3);
1731
- padding-inline:0;
1732
- background:var(--t-surface-color-card);
1733
-
1734
- border:0;
1735
- border-radius:var(--t-border-radius-lg);
1736
- box-shadow:0 4px 18px 0 #0003;
1737
- }
1738
-
1739
- .tds-modal:focus{
1740
- outline:none;
1741
- }
1742
-
1743
- .tds-modal-header{
1744
- display:grid;
1745
- grid-template-columns:1fr auto;
1746
- -moz-column-gap:var(--t-spacing-2);
1747
- column-gap:var(--t-spacing-2);
1748
- padding-block:0;
1749
- padding-inline:var(--t-spacing-4);
1750
- }
1751
-
1752
- .tds-modal-title{
1753
- grid-row:1;
1754
- grid-column:1;
1755
- margin:0;
1756
- font-size:var(--t-font-size-2xl);
1757
- font-weight:var(--t-font-weight-medium);
1758
- line-height:140%;
1759
- color:var(--t-text-color-headline);
1760
- }
1761
-
1762
- .tds-modal-subtitle{
1763
- grid-row:2;
1764
- grid-column:1;
1765
- margin:0;
1766
- font-size:var(--t-font-size-md);
1767
- font-weight:var(--t-font-weight-medium);
1768
- line-height:140%;
1769
- color:var(--t-text-color-secondary);
1770
- }
1771
-
1772
- .tds-modal-close{
1773
- grid-row:1;
1774
- grid-column:2;
1775
- align-self:center;
1776
- color:var(--t-icon-color-dim);
1777
- }
1778
-
1779
- .tds-modal-body{
1780
- padding-block:var(--t-spacing-3);
1781
- padding-inline:var(--t-spacing-4);
1605
+ .tds-checkbox-group-description{
1606
+ display:flex;
1607
+ gap:var(--t-spacing-half);
1608
+ align-items:flex-start;
1609
+ margin:var(--t-spacing-fourth) 0 0;
1610
+ font-size:var(--tds-checkbox-group-description-font-size);
1611
+ line-height:var(--tds-checkbox-group-description-line-height);
1612
+ color:var(--tds-checkbox-group-description-color);
1613
+ cursor:text;
1782
1614
  }
1783
1615
 
1784
- .tds-modal-body--full-width{
1785
- padding-inline:0;
1786
- }
1616
+ .tds-checkbox-group-description .tds-checkbox-group-description-invalid-icon{
1617
+ display:var(--tds-checkbox-group-description-invalid-icon-display);
1618
+ flex-shrink:0;
1619
+ margin-top:calc(.5lh - .5em);
1620
+ line-height:var(--tds-checkbox-group-description-line-height);
1621
+ }
1787
1622
 
1788
- .tds-modal-footer{
1789
- display:flex;
1790
- gap:var(--t-spacing-2);
1791
- align-items:center;
1792
- justify-content:flex-end;
1793
- padding-block:var(--t-spacing-3);
1794
- padding-inline:var(--t-spacing-4);
1795
- border-top:1px solid var(--t-border-color);
1623
+ .tds-checkbox-group--sm{
1624
+ --tds-checkbox-group-line-height:1.35;
1625
+ --tds-checkbox-group-font-size:var(--t-font-size-sm);
1626
+ --tds-checkbox-group-description-font-size:var(--t-font-size-xs);
1627
+ --tds-checkbox-group-description-line-height:1.3;
1796
1628
  }
1797
1629
 
1798
- .tds-modal-footer > [slot="start"]{
1799
- margin-inline-end:auto;
1800
- }
1801
1630
 
1802
- @media (min-width: 720px){
1803
- .tds-modal-overlay{
1804
- --tds-modal-min-margin-block:0;
1631
+ :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
1632
+ -webkit-appearance:none;
1633
+ appearance:none;
1634
+ }
1635
+
1636
+ [type="number"]:is(.tds-input input)::-webkit-inner-spin-button{
1637
+ inline-size:1em;
1638
+ block-size:2em;
1639
+ }
1640
+ @supports (field-sizing: content){
1641
+ .tds-input--auto-width{
1642
+ inline-size:-moz-fit-content;
1643
+ inline-size:fit-content;
1644
+ min-inline-size:min(100%, 122px);
1805
1645
  }
1806
1646
 
1807
- .tds-modal-footer{
1808
- position:sticky;
1809
- bottom:0;
1810
- background:var(--t-surface-color-card);
1647
+ .tds-input--auto-width input{
1648
+ field-sizing:content;
1649
+ inline-size:auto;
1811
1650
  }
1812
1651
  }
1813
1652
 
@@ -2027,6 +1866,167 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2027
1866
  --tds-radio-group-description-line-height:1.3;
2028
1867
  }
2029
1868
 
1869
+ .tds-modal-overlay{
1870
+ --tds-modal-min-margin-block:var(--t-spacing-3);
1871
+
1872
+ position:fixed;
1873
+ inset:0;
1874
+ z-index:1000;
1875
+ display:grid;
1876
+ grid-template-rows:minmax(var(--tds-modal-min-margin-block), 1fr) auto minmax(var(--tds-modal-min-margin-block), 1fr);
1877
+ justify-items:center;
1878
+ overflow-y:auto;
1879
+ background:hsl(0 0% 0% / 40%);
1880
+ }
1881
+
1882
+ .tds-modal-overlay[data-entering]{
1883
+ animation:tds-modal-overlay-fade var(--t-duration-300) var(--t-ease-out);
1884
+ }
1885
+
1886
+ .tds-modal-overlay[data-exiting]{
1887
+ animation:tds-modal-overlay-fade var(--t-duration-200) var(--t-ease-in) reverse;
1888
+ }
1889
+
1890
+ @keyframes tds-modal-overlay-fade{
1891
+ from{
1892
+ opacity:0;
1893
+ }
1894
+ }
1895
+
1896
+ .tds-modal-frame{
1897
+ --tds-modal-width:600px;
1898
+ --tds-modal-edge-margin-inline:var(--t-spacing-3);
1899
+ display:flex;
1900
+
1901
+ grid-row:2;
1902
+ justify-content:center;
1903
+ width:min(var(--tds-modal-width), calc(100% - var(--tds-modal-edge-margin-inline) * 2));
1904
+ }
1905
+
1906
+ .tds-modal-frame[data-entering]{
1907
+ animation:tds-modal-zoom var(--t-duration-300) var(--t-ease-out);
1908
+ }
1909
+
1910
+ .tds-modal-frame[data-exiting]{
1911
+ animation:tds-modal-zoom var(--t-duration-200) var(--t-ease-in) reverse;
1912
+ }
1913
+
1914
+ .tds-modal-frame--sm{
1915
+ --tds-modal-width:400px;
1916
+ }
1917
+
1918
+ .tds-modal-frame--lg{
1919
+ --tds-modal-width:800px;
1920
+ }
1921
+
1922
+ .tds-modal-frame--xl{
1923
+ --tds-modal-width:1000px;
1924
+ }
1925
+
1926
+ @keyframes tds-modal-zoom{
1927
+ from{
1928
+ opacity:0;
1929
+ scale:.96;
1930
+ }
1931
+ }
1932
+
1933
+ @media (prefers-reduced-motion: reduce){
1934
+ .tds-modal-overlay[data-entering],
1935
+ .tds-modal-overlay[data-exiting],
1936
+ .tds-modal-frame[data-entering],
1937
+ .tds-modal-frame[data-exiting]{
1938
+ animation:none;
1939
+ }
1940
+ }
1941
+
1942
+ .tds-modal{
1943
+ display:flex;
1944
+ flex-direction:column;
1945
+ width:100%;
1946
+ padding-block-start:var(--t-spacing-3);
1947
+ padding-inline:0;
1948
+ background:var(--t-surface-color-card);
1949
+
1950
+ border:0;
1951
+ border-radius:var(--t-border-radius-lg);
1952
+ box-shadow:0 4px 18px 0 #0003;
1953
+ }
1954
+
1955
+ .tds-modal:focus{
1956
+ outline:none;
1957
+ }
1958
+
1959
+ .tds-modal-header{
1960
+ display:grid;
1961
+ grid-template-columns:1fr auto;
1962
+ -moz-column-gap:var(--t-spacing-2);
1963
+ column-gap:var(--t-spacing-2);
1964
+ padding-block:0;
1965
+ padding-inline:var(--t-spacing-4);
1966
+ }
1967
+
1968
+ .tds-modal-title{
1969
+ grid-row:1;
1970
+ grid-column:1;
1971
+ margin:0;
1972
+ font-size:var(--t-font-size-2xl);
1973
+ font-weight:var(--t-font-weight-medium);
1974
+ line-height:140%;
1975
+ color:var(--t-text-color-headline);
1976
+ }
1977
+
1978
+ .tds-modal-subtitle{
1979
+ grid-row:2;
1980
+ grid-column:1;
1981
+ margin:0;
1982
+ font-size:var(--t-font-size-md);
1983
+ font-weight:var(--t-font-weight-medium);
1984
+ line-height:140%;
1985
+ color:var(--t-text-color-secondary);
1986
+ }
1987
+
1988
+ .tds-modal-close{
1989
+ grid-row:1;
1990
+ grid-column:2;
1991
+ align-self:center;
1992
+ color:var(--t-icon-color-dim);
1993
+ }
1994
+
1995
+ .tds-modal-body{
1996
+ padding-block:var(--t-spacing-3);
1997
+ padding-inline:var(--t-spacing-4);
1998
+ }
1999
+
2000
+ .tds-modal-body--full-width{
2001
+ padding-inline:0;
2002
+ }
2003
+
2004
+ .tds-modal-footer{
2005
+ display:flex;
2006
+ gap:var(--t-spacing-2);
2007
+ align-items:center;
2008
+ justify-content:flex-end;
2009
+ padding-block:var(--t-spacing-3);
2010
+ padding-inline:var(--t-spacing-4);
2011
+ border-top:1px solid var(--t-border-color);
2012
+ }
2013
+
2014
+ .tds-modal-footer > [slot="start"]{
2015
+ margin-inline-end:auto;
2016
+ }
2017
+
2018
+ @media (min-width: 720px){
2019
+ .tds-modal-overlay{
2020
+ --tds-modal-min-margin-block:0;
2021
+ }
2022
+
2023
+ .tds-modal-footer{
2024
+ position:sticky;
2025
+ bottom:0;
2026
+ background:var(--t-surface-color-card);
2027
+ }
2028
+ }
2029
+
2030
2030
  .tds-input:has(textarea){
2031
2031
  --tds-input-padding-block:6px;
2032
2032
  --tds-input-resizer-size:var(--t-element-size-sm);
@@ -4055,46 +4055,59 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4055
4055
  to{ transform:translateY(var(--_sticky-header-scroll-max, 0)); }
4056
4056
  }
4057
4057
  }
4058
-
4059
4058
  @supports (timeline-scope: --tds){
4060
4059
  .tds-data-table-scroll-wrapper{
4061
4060
  --tds-data-table-scroll-shadow-size:var(--t-spacing-1);
4062
4061
 
4063
4062
  timeline-scope:--tds-data-table-scroll-timeline;
4064
4063
  }
4065
-
4066
- .tds-data-table-scroll-wrapper::before,.tds-data-table-scroll-wrapper::after{
4067
- position:absolute;
4068
- inset-block:0;
4069
- z-index:1;
4070
- width:var(--tds-data-table-scroll-shadow-size);
4071
- pointer-events:none;
4072
- content:"";
4073
- opacity:0;
4074
- animation-duration:auto;
4075
- animation-timeline:--tds-data-table-scroll-timeline;
4076
- animation-timing-function:linear;
4077
- animation-fill-mode:both;
4078
- }
4079
-
4080
- .tds-data-table-scroll-wrapper::before{
4081
- inset-inline-start:0;
4082
- background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
4083
- animation-name:tds-data-table-scroll-shadow;
4084
- animation-range:0 var(--tds-data-table-scroll-shadow-size);
4085
- }
4086
-
4087
- .tds-data-table-scroll-wrapper::after{
4088
- inset-inline-end:0;
4089
- background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
4090
- animation-name:tds-data-table-scroll-shadow;
4091
- animation-direction:reverse;
4092
- animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
4064
+ .tds-data-table-scroll-wrapper:has(.tds-data-table-column--actions)::after{
4065
+ content:none;
4093
4066
  }
4094
4067
 
4095
4068
  .tds-data-table-scroll{
4096
4069
  scroll-timeline:--tds-data-table-scroll-timeline inline;
4097
4070
  }
4071
+ .tds-data-table-scroll-wrapper::before,
4072
+ .tds-data-table-scroll-wrapper::after,
4073
+ .tds-data-table-column--actions::before,
4074
+ .tds-data-table-cell--actions::before{
4075
+ position:absolute;
4076
+ inset-block:0;
4077
+ z-index:1;
4078
+ width:var(--tds-data-table-scroll-shadow-size);
4079
+ pointer-events:none;
4080
+ content:"";
4081
+ opacity:0;
4082
+ animation-name:tds-data-table-scroll-shadow;
4083
+ animation-duration:auto;
4084
+ animation-timeline:--tds-data-table-scroll-timeline;
4085
+ animation-timing-function:linear;
4086
+ animation-fill-mode:both;
4087
+ }
4088
+
4089
+ .tds-data-table-scroll-wrapper::before{
4090
+ inset-inline-start:0;
4091
+ background:linear-gradient(to right, var(--t-shadow-overflow-color), transparent);
4092
+ animation-range:0 var(--tds-data-table-scroll-shadow-size);
4093
+ }
4094
+
4095
+ .tds-data-table-scroll-wrapper::after,
4096
+ .tds-data-table-column--actions::before,
4097
+ .tds-data-table-cell--actions::before{
4098
+ background:linear-gradient(to left, var(--t-shadow-overflow-color), transparent);
4099
+ animation-direction:reverse;
4100
+ animation-range:calc(100% - var(--tds-data-table-scroll-shadow-size)) 100%;
4101
+ }
4102
+
4103
+ .tds-data-table-scroll-wrapper::after{
4104
+ inset-inline-end:0;
4105
+ }
4106
+
4107
+ .tds-data-table-column--actions::before,
4108
+ .tds-data-table-cell--actions::before{
4109
+ inset-inline-start:calc(-1 * var(--tds-data-table-scroll-shadow-size));
4110
+ }
4098
4111
 
4099
4112
  @keyframes tds-data-table-scroll-shadow{
4100
4113
  from{ opacity:0; }
@@ -4173,7 +4186,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4173
4186
  --tds-data-table-row-background-hover:var(--t-fill-color-neutral-090);
4174
4187
  cursor:default;
4175
4188
  }
4176
- .tds-data-table-row--interactive[data-hovered]{
4189
+ .tds-data-table-row--interactive[data-hovered],.tds-data-table-row--interactive[data-hovered] .tds-data-table-cell--actions{
4177
4190
  background-color:var(--tds-data-table-row-background-hover);
4178
4191
  }
4179
4192
  .tds-data-table-row--interactive[data-focus-visible]{
@@ -4257,6 +4270,18 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
4257
4270
  width:var(--t-element-size-md);
4258
4271
  text-align:center;
4259
4272
  }
4273
+ .tds-data-table-column--actions,
4274
+ .tds-data-table-cell--actions{
4275
+ position:sticky;
4276
+ inset-inline-end:0;
4277
+ width:1%;
4278
+ text-align:right;
4279
+ }
4280
+
4281
+ .tds-data-table-cell--actions{
4282
+ padding-inline:var(--tds-data-table-cell-padding-block);
4283
+ background-color:var(--tds-data-table-background-color);
4284
+ }
4260
4285
  .tds-data-table-selectable-checkbox{
4261
4286
  --tds-data-table-selectable-checkbox-background-color:var(--t-form-background-color);
4262
4287
  --tds-data-table-selectable-checkbox-border-color:var(--t-form-border-color);