@itwin/itwinui-css 0.39.1 → 0.40.0

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 (29) hide show
  1. package/css/all.css +343 -262
  2. package/css/breadcrumbs.css +26 -15
  3. package/css/button.css +192 -137
  4. package/css/code.css +2 -0
  5. package/css/header.css +34 -16
  6. package/css/inputs.css +14 -28
  7. package/css/side-navigation.css +27 -24
  8. package/css/table.css +2 -2
  9. package/css/tile.css +46 -40
  10. package/package.json +1 -1
  11. package/scss/breadcrumbs/breadcrumbs.scss +1 -1
  12. package/scss/button/borderless.scss +30 -39
  13. package/scss/button/button-group.scss +3 -3
  14. package/scss/button/button-icon.scss +12 -0
  15. package/scss/button/button.scss +27 -32
  16. package/scss/button/classes.scss +25 -3
  17. package/scss/button/cta.scss +22 -19
  18. package/scss/button/default.scss +29 -41
  19. package/scss/button/disabled.scss +3 -14
  20. package/scss/button/high-visibility.scss +22 -19
  21. package/scss/button/index.scss +1 -0
  22. package/scss/button/split-menu.scss +5 -0
  23. package/scss/code/codeblock.scss +4 -0
  24. package/scss/header/header.scss +22 -10
  25. package/scss/inputs/checkbox-radio.scss +1 -3
  26. package/scss/inputs/checkbox.scss +5 -2
  27. package/scss/side-navigation/side-navigation.scss +27 -22
  28. package/scss/table/table.scss +2 -2
  29. package/scss/tile/tile.scss +4 -2
package/css/all.css CHANGED
@@ -592,38 +592,49 @@ html.iui-theme-dark{
592
592
  color:var(--iui-color-foreground-primary-overlay);
593
593
  text-decoration:underline; }
594
594
  .iui-breadcrumbs-item .iui-button{
595
- background-color:transparent;
596
595
  border-color:transparent;
596
+ background-color:transparent;
597
597
  padding:0 8px;
598
+ height:38px;
599
+ gap:8px;
598
600
  margin:0 -9px; }
599
- .iui-breadcrumbs-item .iui-button.iui-small{
600
- padding:0 2px; }
601
- .iui-breadcrumbs-item .iui-button.iui-large{
602
- padding:0 12px; }
603
- .iui-breadcrumbs-item .iui-button > .iui-icon:only-child{
601
+ .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
604
602
  margin-left:3px;
605
603
  margin-right:3px; }
606
- .iui-breadcrumbs-item .iui-button:enabled:hover, .iui-breadcrumbs-item .iui-button:enabled:active, .iui-breadcrumbs-item .iui-button:focus-visible{
604
+ .iui-breadcrumbs-item .iui-button:hover, .iui-breadcrumbs-item .iui-button:focus{
607
605
  background-color:rgba(0, 0, 0, 0.1);
608
606
  border-color:transparent;
609
607
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
610
608
  border-color:transparent; }
611
- .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-breadcrumbs-item .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
612
- background:transparent;
609
+ .iui-breadcrumbs-item .iui-button:focus:not(:focus-visible){
610
+ border-color:transparent;
611
+ background-color:transparent; }
612
+ .iui-breadcrumbs-item .iui-button:focus:not(:focus-visible) > .iui-button-icon:only-child{
613
+ margin-left:3px;
614
+ margin-right:3px; }
615
+ .iui-breadcrumbs-item .iui-button.iui-active{
613
616
  background-color:rgba(0, 139, 225, 0.1);
617
+ color:#008BE1;
614
618
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
619
+ color:var(--iui-color-foreground-primary);
615
620
  border-color:transparent; }
616
- .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button[disabled]:hover, .iui-breadcrumbs-item .iui-button[disabled]:active, .iui-breadcrumbs-item .iui-button[disabled]:focus{
621
+ .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button:disabled{
622
+ cursor:not-allowed;
623
+ background:#EEF0F3;
624
+ border-color:#EEF0F3;
625
+ color:rgba(0, 0, 0, 0.2);
626
+ background:var(--iui-color-background-disabled);
627
+ border-color:var(--iui-color-background-disabled);
628
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
629
+ background-color:transparent;
630
+ border-color:transparent;
617
631
  background-color:transparent;
618
632
  border-color:transparent; }
619
- .iui-breadcrumbs-item .iui-button[disabled] > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:hover > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:active > .iui-icon, .iui-breadcrumbs-item .iui-button[disabled]:focus > .iui-icon{
620
- fill:rgba(0, 0, 0, 0.2);
621
- fill:var(--iui-icons-color-actionable-disabled); }
622
- .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button[disabled]:hover.iui-active, .iui-breadcrumbs-item .iui-button[disabled]:active.iui-active, .iui-breadcrumbs-item .iui-button[disabled]:focus.iui-active{
633
+ .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button:disabled.iui-active{
623
634
  background-color:rgba(0, 0, 0, 0.05);
624
635
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
625
636
  .iui-breadcrumbs-item > *,
626
- .iui-breadcrumbs-item .iui-label{
637
+ .iui-breadcrumbs-item .iui-button-label{
627
638
  overflow:hidden;
628
639
  white-space:nowrap;
629
640
  text-overflow:ellipsis; }
@@ -682,25 +693,21 @@ html.iui-theme-dark{
682
693
  cursor:pointer;
683
694
  white-space:nowrap;
684
695
  border:1px solid transparent;
696
+ color:rgba(0, 0, 0, 0.8);
697
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
685
698
  padding:0 16px;
686
699
  height:38px;
687
- background-color:#FFF;
688
- border-color:rgba(0, 0, 0, 0.4);
689
- color:rgba(0, 0, 0, 0.8);
690
- background-color:var(--iui-color-background-1);
691
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
692
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
700
+ gap:8px;
701
+ padding:0 16px;
702
+ height:38px;
703
+ gap:8px; }
693
704
  @media (prefers-reduced-motion: no-preference){
694
705
  .iui-button{
695
706
  transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
696
- .iui-button > .iui-icon:not(.iui-user-icon){
697
- width:16px;
698
- height:16px; }
699
- @media (prefers-reduced-motion: no-preference){
700
- .iui-button > .iui-icon:not(.iui-user-icon){
701
- transition:fill 0.2s ease-out; } }
702
- .iui-button:enabled:hover{
703
- text-decoration:none; }
707
+ .iui-button:hover{
708
+ text-decoration:none;
709
+ color:black;
710
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
704
711
  .iui-button:focus{
705
712
  outline:0;
706
713
  box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
@@ -711,65 +718,66 @@ html.iui-theme-dark{
711
718
  outline:0;
712
719
  box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
713
720
  box-shadow:var(--iui-focus-box-shadow); }
714
- .iui-button > .iui-icon + .iui-label,
715
- .iui-button > .iui-label + .iui-icon,
716
- .iui-button > .iui-icon + .iui-icon{
717
- margin-left:8px; }
718
- .iui-button.iui-small{
719
- padding:0 8px;
720
- height:27px; }
721
- .iui-button.iui-small > .iui-icon + .iui-label,
722
- .iui-button.iui-small > .iui-label + .iui-icon,
723
- .iui-button.iui-small > .iui-icon + .iui-icon{
724
- margin-left:4px; }
725
- .iui-button.iui-large{
726
- padding:0 24px;
727
- height:49px;
728
- font-size:16px; }
729
- .iui-button.iui-large > .iui-icon + .iui-label,
730
- .iui-button.iui-large > .iui-label + .iui-icon,
731
- .iui-button.iui-large > .iui-icon + .iui-icon{
732
- margin-left:12px; }
733
- .iui-button > .iui-icon{
734
- fill:rgba(0, 0, 0, 0.8);
735
- fill:var(--iui-icons-color-actionable); }
736
- .iui-button:enabled:hover, .iui-button:enabled:active, .iui-button:focus-visible{
737
- background-color:#f2f2f2;
738
- border-color:black;
739
- color:black;
740
- background-color:var(--iui-color-background-1-overlay);
741
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
742
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
743
- .iui-button:enabled:hover .iui-notification-primary::before,
744
- .iui-button:enabled:hover .iui-notification-positive::before,
745
- .iui-button:enabled:hover .iui-notification-warning::before,
746
- .iui-button:enabled:hover .iui-notification-negative::before, .iui-button:enabled:active .iui-notification-primary::before,
747
- .iui-button:enabled:active .iui-notification-positive::before,
748
- .iui-button:enabled:active .iui-notification-warning::before,
749
- .iui-button:enabled:active .iui-notification-negative::before, .iui-button:focus-visible .iui-notification-primary::before,
750
- .iui-button:focus-visible .iui-notification-positive::before,
751
- .iui-button:focus-visible .iui-notification-warning::before,
752
- .iui-button:focus-visible .iui-notification-negative::before{
753
- border-color:#f2f2f2;
754
- border-color:var(--iui-color-background-1-overlay); }
755
- .iui-button:enabled:hover > .iui-icon, .iui-button:enabled:active > .iui-icon, .iui-button:focus-visible > .iui-icon{
756
- fill:black;
757
- fill:var(--iui-icons-color-actionable-hover); }
758
- .iui-button.iui-dropdown{
759
- padding-right:8px; }
760
- .iui-button.iui-dropdown.iui-small{
761
- padding-right:4px; }
762
- .iui-button.iui-dropdown.iui-large{
763
- padding-right:12px; }
764
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
765
- background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
766
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
767
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled > .iui-label, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover > .iui-label, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active > .iui-label{
721
+ .iui-button[disabled], .iui-button:disabled{
722
+ cursor:not-allowed;
723
+ background:#EEF0F3;
724
+ border-color:#EEF0F3;
725
+ color:rgba(0, 0, 0, 0.2);
726
+ background:var(--iui-color-background-disabled);
727
+ border-color:var(--iui-color-background-disabled);
728
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
729
+ .iui-button.iui-default{
730
+ background-color:#FFF;
731
+ border-color:rgba(0, 0, 0, 0.4);
732
+ color:rgba(0, 0, 0, 0.8);
733
+ background-color:var(--iui-color-background-1);
734
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
735
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
736
+ .iui-button.iui-default:hover, .iui-button.iui-default:active, .iui-button.iui-default:focus{
737
+ background-color:#f2f2f2;
738
+ border-color:black;
739
+ color:black;
740
+ background-color:var(--iui-color-background-1-overlay);
741
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
742
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
743
+ .iui-button.iui-default:hover .iui-notification-primary::before,
744
+ .iui-button.iui-default:hover .iui-notification-positive::before,
745
+ .iui-button.iui-default:hover .iui-notification-warning::before,
746
+ .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
747
+ .iui-button.iui-default:active .iui-notification-positive::before,
748
+ .iui-button.iui-default:active .iui-notification-warning::before,
749
+ .iui-button.iui-default:active .iui-notification-negative::before, .iui-button.iui-default:focus .iui-notification-primary::before,
750
+ .iui-button.iui-default:focus .iui-notification-positive::before,
751
+ .iui-button.iui-default:focus .iui-notification-warning::before,
752
+ .iui-button.iui-default:focus .iui-notification-negative::before{
753
+ border-color:#f2f2f2;
754
+ border-color:var(--iui-color-background-1-overlay); }
755
+ .iui-button.iui-default:focus:not(:focus-visible){
756
+ background-color:#FFF;
757
+ border-color:rgba(0, 0, 0, 0.4);
758
+ color:rgba(0, 0, 0, 0.8);
759
+ background-color:var(--iui-color-background-1);
760
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
761
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
762
+ .iui-button.iui-default.iui-dropdown{
763
+ padding-right:8px; }
764
+ .iui-button.iui-default.iui-dropdown.iui-small{
765
+ padding-right:4px; }
766
+ .iui-button.iui-default.iui-dropdown.iui-large{
767
+ padding-right:12px; }
768
+ .iui-button.iui-default.iui-active{
769
+ background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
768
770
  color:#008BE1;
771
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
769
772
  color:var(--iui-color-foreground-primary); }
770
- .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled > .iui-icon, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover > .iui-icon, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active > .iui-icon{
771
- fill:#008BE1;
772
- fill:var(--iui-icons-color-primary); }
773
+ .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
774
+ cursor:not-allowed;
775
+ background:#EEF0F3;
776
+ border-color:#EEF0F3;
777
+ color:rgba(0, 0, 0, 0.2);
778
+ background:var(--iui-color-background-disabled);
779
+ border-color:var(--iui-color-background-disabled);
780
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
773
781
  .iui-button.iui-high-visibility{
774
782
  background-color:#008BE1;
775
783
  border-color:#008BE1;
@@ -777,19 +785,28 @@ html.iui-theme-dark{
777
785
  background-color:var(--iui-color-background-primary);
778
786
  border-color:var(--iui-color-background-primary);
779
787
  color:var(--iui-color-foreground-accessory); }
780
- .iui-button.iui-high-visibility > .iui-icon{
781
- fill:#FFF;
782
- fill:var(--iui-color-foreground-accessory); }
783
- .iui-button.iui-high-visibility:enabled:hover, .iui-button.iui-high-visibility:enabled:active, .iui-button.iui-high-visibility:focus-visible{
788
+ .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active, .iui-button.iui-high-visibility:focus{
784
789
  background-color:#006bae;
785
790
  border-color:#006bae;
786
791
  color:#FFF;
787
792
  background-color:var(--iui-color-background-primary-overlay);
788
793
  border-color:var(--iui-color-background-primary-overlay);
789
794
  color:var(--iui-color-foreground-accessory); }
790
- .iui-button.iui-high-visibility:enabled:hover > .iui-icon, .iui-button.iui-high-visibility:enabled:active > .iui-icon, .iui-button.iui-high-visibility:focus-visible > .iui-icon{
791
- fill:#FFF;
792
- fill:var(--iui-color-foreground-accessory); }
795
+ .iui-button.iui-high-visibility:focus:not(:focus-visible){
796
+ background-color:#008BE1;
797
+ border-color:#008BE1;
798
+ color:#FFF;
799
+ background-color:var(--iui-color-background-primary);
800
+ border-color:var(--iui-color-background-primary);
801
+ color:var(--iui-color-foreground-accessory); }
802
+ .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
803
+ cursor:not-allowed;
804
+ background:#EEF0F3;
805
+ border-color:#EEF0F3;
806
+ color:rgba(0, 0, 0, 0.2);
807
+ background:var(--iui-color-background-disabled);
808
+ border-color:var(--iui-color-background-disabled);
809
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
793
810
  .iui-button.iui-cta{
794
811
  background-color:#53A21A;
795
812
  border-color:#53A21A;
@@ -797,19 +814,28 @@ html.iui-theme-dark{
797
814
  background-color:var(--iui-color-background-positive);
798
815
  border-color:var(--iui-color-background-positive);
799
816
  color:var(--iui-color-foreground-accessory); }
800
- .iui-button.iui-cta > .iui-icon{
801
- fill:#FFF;
802
- fill:var(--iui-color-foreground-accessory); }
803
- .iui-button.iui-cta:enabled:hover, .iui-button.iui-cta:enabled:active, .iui-button.iui-cta:focus-visible{
817
+ .iui-button.iui-cta:hover, .iui-button.iui-cta:active, .iui-button.iui-cta:focus{
804
818
  background-color:#3c7613;
805
819
  border-color:#3c7613;
806
820
  color:#FFF;
807
821
  background-color:var(--iui-color-background-positive-overlay);
808
822
  border-color:var(--iui-color-background-positive-overlay);
809
823
  color:var(--iui-color-foreground-accessory); }
810
- .iui-button.iui-cta:enabled:hover > .iui-icon, .iui-button.iui-cta:enabled:active > .iui-icon, .iui-button.iui-cta:focus-visible > .iui-icon{
811
- fill:#FFF;
812
- fill:var(--iui-color-foreground-accessory); }
824
+ .iui-button.iui-cta:focus:not(:focus-visible){
825
+ background-color:#53A21A;
826
+ border-color:#53A21A;
827
+ color:#FFF;
828
+ background-color:var(--iui-color-background-positive);
829
+ border-color:var(--iui-color-background-positive);
830
+ color:var(--iui-color-foreground-accessory); }
831
+ .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
832
+ cursor:not-allowed;
833
+ background:#EEF0F3;
834
+ border-color:#EEF0F3;
835
+ color:rgba(0, 0, 0, 0.2);
836
+ background:var(--iui-color-background-disabled);
837
+ border-color:var(--iui-color-background-disabled);
838
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
813
839
  .iui-button.iui-idea{
814
840
  background-color:#008BE1;
815
841
  border-color:#008BE1;
@@ -822,61 +848,87 @@ html.iui-theme-dark{
822
848
  position:fixed;
823
849
  bottom:11px;
824
850
  right:16px; }
825
- .iui-button.iui-idea > .iui-icon{
826
- fill:#FFF;
827
- fill:var(--iui-color-foreground-accessory); }
828
- .iui-button.iui-idea:enabled:hover, .iui-button.iui-idea:enabled:active, .iui-button.iui-idea:focus-visible{
851
+ .iui-button.iui-idea:hover, .iui-button.iui-idea:active, .iui-button.iui-idea:focus{
829
852
  background-color:#006bae;
830
853
  border-color:#006bae;
831
854
  color:#FFF;
832
855
  background-color:var(--iui-color-background-primary-overlay);
833
856
  border-color:var(--iui-color-background-primary-overlay);
834
857
  color:var(--iui-color-foreground-accessory); }
835
- .iui-button.iui-idea:enabled:hover > .iui-icon, .iui-button.iui-idea:enabled:active > .iui-icon, .iui-button.iui-idea:focus-visible > .iui-icon{
836
- fill:#FFF;
837
- fill:var(--iui-color-foreground-accessory); }
858
+ .iui-button.iui-idea:focus:not(:focus-visible){
859
+ background-color:#008BE1;
860
+ border-color:#008BE1;
861
+ color:#FFF;
862
+ background-color:var(--iui-color-background-primary);
863
+ border-color:var(--iui-color-background-primary);
864
+ color:var(--iui-color-foreground-accessory); }
865
+ .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
866
+ cursor:not-allowed;
867
+ background:#EEF0F3;
868
+ border-color:#EEF0F3;
869
+ color:rgba(0, 0, 0, 0.2);
870
+ background:var(--iui-color-background-disabled);
871
+ border-color:var(--iui-color-background-disabled);
872
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
838
873
  .iui-button.iui-borderless{
839
- background-color:transparent;
840
874
  border-color:transparent;
841
- padding:0 8px; }
842
- .iui-button.iui-borderless.iui-small{
843
- padding:0 2px; }
844
- .iui-button.iui-borderless.iui-large{
845
- padding:0 12px; }
846
- .iui-button.iui-borderless > .iui-icon:only-child{
875
+ background-color:transparent;
876
+ padding:0 8px;
877
+ height:38px;
878
+ gap:8px; }
879
+ .iui-button.iui-borderless > .iui-button-icon:only-child{
847
880
  margin-left:3px;
848
881
  margin-right:3px; }
849
- .iui-button.iui-borderless:enabled:hover, .iui-button.iui-borderless:enabled:active, .iui-button.iui-borderless:focus-visible{
882
+ .iui-button.iui-borderless:hover, .iui-button.iui-borderless:focus{
850
883
  background-color:rgba(0, 0, 0, 0.1);
851
884
  border-color:transparent;
852
885
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
853
886
  border-color:transparent; }
854
- .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-button.iui-borderless.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
855
- background:transparent;
887
+ .iui-button.iui-borderless:focus:not(:focus-visible){
888
+ border-color:transparent;
889
+ background-color:transparent; }
890
+ .iui-button.iui-borderless:focus:not(:focus-visible) > .iui-button-icon:only-child{
891
+ margin-left:3px;
892
+ margin-right:3px; }
893
+ .iui-button.iui-borderless.iui-active{
856
894
  background-color:rgba(0, 139, 225, 0.1);
895
+ color:#008BE1;
857
896
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
897
+ color:var(--iui-color-foreground-primary);
858
898
  border-color:transparent; }
859
- .iui-button.iui-borderless[disabled], .iui-button.iui-borderless[disabled]:hover, .iui-button.iui-borderless[disabled]:active, .iui-button.iui-borderless[disabled]:focus{
899
+ .iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
900
+ cursor:not-allowed;
901
+ background:#EEF0F3;
902
+ border-color:#EEF0F3;
903
+ color:rgba(0, 0, 0, 0.2);
904
+ background:var(--iui-color-background-disabled);
905
+ border-color:var(--iui-color-background-disabled);
906
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
907
+ background-color:transparent;
908
+ border-color:transparent;
860
909
  background-color:transparent;
861
910
  border-color:transparent; }
862
- .iui-button.iui-borderless[disabled] > .iui-icon, .iui-button.iui-borderless[disabled]:hover > .iui-icon, .iui-button.iui-borderless[disabled]:active > .iui-icon, .iui-button.iui-borderless[disabled]:focus > .iui-icon{
863
- fill:rgba(0, 0, 0, 0.2);
864
- fill:var(--iui-icons-color-actionable-disabled); }
865
- .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless[disabled]:hover.iui-active, .iui-button.iui-borderless[disabled]:active.iui-active, .iui-button.iui-borderless[disabled]:focus.iui-active{
911
+ .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
866
912
  background-color:rgba(0, 0, 0, 0.05);
867
913
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
868
- .iui-button[disabled]{
869
- cursor:not-allowed;
870
- background-color:#EEF0F3;
871
- border-color:#EEF0F3;
872
- background-color:var(--iui-color-background-disabled);
873
- border-color:var(--iui-color-background-disabled); }
874
- .iui-button[disabled] > .iui-label{
875
- color:rgba(0, 0, 0, 0.2);
876
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
877
- .iui-button[disabled] > .iui-icon{
878
- fill:rgba(0, 0, 0, 0.2);
879
- fill:var(--iui-icons-color-actionable-disabled); }
914
+ .iui-button.iui-small{
915
+ padding:0 8px;
916
+ height:27px;
917
+ gap:4px; }
918
+ .iui-button.iui-small.iui-borderless{
919
+ padding:0 2px;
920
+ height:27px;
921
+ gap:4px; }
922
+ .iui-button.iui-large{
923
+ padding:0 24px;
924
+ height:49px;
925
+ font-size:16px;
926
+ gap:12px; }
927
+ .iui-button.iui-large.iui-borderless{
928
+ padding:0 12px;
929
+ height:49px;
930
+ font-size:16px;
931
+ gap:12px; }
880
932
 
881
933
  .iui-button-group{
882
934
  display:inline-flex;
@@ -889,17 +941,17 @@ html.iui-theme-dark{
889
941
  .iui-button-group > .iui-button:last-of-type:not(.iui-borderless){
890
942
  border-top-right-radius:3px;
891
943
  border-bottom-right-radius:3px; }
892
- .iui-button-group > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
944
+ .iui-button-group > .iui-button.iui-default:not(:last-of-type){
893
945
  border-right:none; }
894
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
946
+ .iui-button-group > .iui-button.iui-default:not(:disabled) + :disabled{
895
947
  border-left-color:rgba(0, 0, 0, 0.4);
896
948
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
897
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
898
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
899
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
949
+ .iui-button-group > .iui-button.iui-default:not(:disabled):hover + .iui-button,
950
+ .iui-button-group > .iui-button.iui-default:not(:disabled):active + .iui-button,
951
+ .iui-button-group > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
900
952
  border-left-color:black;
901
953
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
902
- .iui-button-group > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
954
+ .iui-button-group > .iui-button.iui-default:disabled + .iui-button:disabled{
903
955
  border-left-color:#DCE0E3;
904
956
  border-left-color:var(--iui-color-background-4); }
905
957
  .iui-button-group > .iui-active::after{
@@ -929,17 +981,17 @@ html.iui-theme-dark{
929
981
  .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
930
982
  border-top-right-radius:3px;
931
983
  border-bottom-right-radius:3px; }
932
- .iui-button-split-menu > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
984
+ .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
933
985
  border-right:none; }
934
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
986
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
935
987
  border-left-color:rgba(0, 0, 0, 0.4);
936
988
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
937
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
938
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
939
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
989
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
990
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
991
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
940
992
  border-left-color:black;
941
993
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
942
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
994
+ .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
943
995
  border-left-color:#DCE0E3;
944
996
  border-left-color:var(--iui-color-background-4); }
945
997
  .iui-button-split-menu > .iui-active::after{
@@ -963,17 +1015,17 @@ html.iui-theme-dark{
963
1015
  .iui-button-split-menu > .iui-button:last-of-type:not(.iui-borderless){
964
1016
  border-top-right-radius:3px;
965
1017
  border-bottom-right-radius:3px; }
966
- .iui-button-split-menu > .iui-button:not(.iui-borderless):not(.iui-cta):not(.iui-high-visibility):not(:last-of-type){
1018
+ .iui-button-split-menu > .iui-button.iui-default:not(:last-of-type){
967
1019
  border-right:none; }
968
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled + :disabled{
1020
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled) + :disabled{
969
1021
  border-left-color:rgba(0, 0, 0, 0.4);
970
1022
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
971
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:hover + .iui-button,
972
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:active + .iui-button,
973
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):enabled:focus-visible + .iui-button{
1023
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):hover + .iui-button,
1024
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):active + .iui-button,
1025
+ .iui-button-split-menu > .iui-button.iui-default:not(:disabled):focus-visible + .iui-button{
974
1026
  border-left-color:black;
975
1027
  border-left-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
976
- .iui-button-split-menu > .iui-button:not(.iui-high-visibility):not(.iui-cta):not(.iui-borderless):disabled + .iui-button:disabled{
1028
+ .iui-button-split-menu > .iui-button.iui-default:disabled + .iui-button:disabled{
977
1029
  border-left-color:#DCE0E3;
978
1030
  border-left-color:var(--iui-color-background-4); }
979
1031
  .iui-button-split-menu > .iui-active::after{
@@ -1009,6 +1061,20 @@ html.iui-theme-dark{
1009
1061
  .iui-button-split-menu.iui-disabled{
1010
1062
  background-color:transparent;
1011
1063
  background-color:transparent; }
1064
+ .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
1065
+ cursor:not-allowed;
1066
+ background:#EEF0F3;
1067
+ border-color:#EEF0F3;
1068
+ color:rgba(0, 0, 0, 0.2);
1069
+ background:var(--iui-color-background-disabled);
1070
+ border-color:var(--iui-color-background-disabled);
1071
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
1072
+
1073
+ .iui-button-icon{
1074
+ width:16px;
1075
+ height:16px;
1076
+ transition:fill 0.2s ease-out;
1077
+ fill:currentColor; }
1012
1078
 
1013
1079
  .iui-code{
1014
1080
  margin:0;
@@ -1047,6 +1113,8 @@ html.iui-theme-dark{
1047
1113
  user-select:all; }
1048
1114
  .iui-codeblock > .iui-title-bar > .iui-button{
1049
1115
  margin-left:auto; }
1116
+ .iui-codeblock .iui-button{
1117
+ gap:0; }
1050
1118
  .iui-codeblock > .iui-codeblock-content{
1051
1119
  margin:0;
1052
1120
  overflow-x:auto;
@@ -1766,7 +1834,14 @@ html.iui-theme-dark{
1766
1834
  .iui-page-header .iui-header-button-icon{
1767
1835
  transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
1768
1836
  .iui-page-header .iui-header-button.iui-header-button{
1837
+ padding:0 12px;
1838
+ height:49px;
1839
+ font-size:16px;
1840
+ gap:12px;
1841
+ gap:0;
1769
1842
  max-width:25vw;
1843
+ height:100%;
1844
+ border-radius:0;
1770
1845
  overflow:hidden;
1771
1846
  padding-right:8px; }
1772
1847
  .iui-page-header .iui-header-button.iui-header-button:focus{
@@ -1776,22 +1851,24 @@ html.iui-theme-dark{
1776
1851
  outline:1px solid var(--iui-color-foreground-primary); }
1777
1852
  .iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
1778
1853
  outline:0; }
1779
- .iui-page-header .iui-header-button.iui-header-button > .iui-label{
1854
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-label{
1780
1855
  text-align:left;
1781
1856
  font-size:14px;
1782
1857
  overflow:hidden; }
1783
- .iui-page-header .iui-header-button.iui-header-button > .iui-label > div{
1858
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-label > div{
1784
1859
  overflow:hidden;
1785
1860
  text-overflow:ellipsis; }
1786
- .iui-page-header .iui-header-button.iui-header-button > .iui-label .iui-description{
1861
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
1787
1862
  height:22px;
1788
1863
  opacity:0.6;
1789
1864
  opacity:var(--iui-opacity-3); }
1790
1865
  @media (prefers-reduced-motion: no-preference){
1791
- .iui-page-header .iui-header-button.iui-header-button > .iui-label .iui-description{
1866
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
1792
1867
  transition:all 0.2s ease; } }
1793
- .iui-page-header .iui-header-button.iui-header-button > .iui-icon{
1868
+ .iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
1794
1869
  flex-shrink:0; }
1870
+ .iui-page-header .iui-header-button.iui-header-button > * + *{
1871
+ margin-left:12px; }
1795
1872
  .iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
1796
1873
  padding:4px;
1797
1874
  width:16px;
@@ -1817,7 +1894,7 @@ html.iui-theme-dark{
1817
1894
  background-color:rgba(0, 139, 225, 0.1);
1818
1895
  fill:var(--iui-icons-color-primary);
1819
1896
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
1820
- .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-label{
1897
+ .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
1821
1898
  color:#008BE1;
1822
1899
  color:var(--iui-color-foreground-primary); }
1823
1900
  .iui-page-header .iui-header-button.iui-header-button.iui-active:focus{
@@ -1848,7 +1925,7 @@ html.iui-theme-dark{
1848
1925
  width:12px;
1849
1926
  height:12px;
1850
1927
  padding:2px; }
1851
- .iui-page-header.iui-slim > .iui-left .iui-button .iui-label .iui-description{
1928
+ .iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
1852
1929
  opacity:0;
1853
1930
  height:0.1px;
1854
1931
  width:0.1px;
@@ -1860,7 +1937,14 @@ html.iui-theme-dark{
1860
1937
  overflow:hidden;
1861
1938
  max-width:25vw; }
1862
1939
  .iui-page-header .iui-header-split-button .iui-button{
1940
+ padding:0 12px;
1941
+ height:49px;
1942
+ font-size:16px;
1943
+ gap:12px;
1944
+ gap:0;
1863
1945
  max-width:25vw;
1946
+ height:100%;
1947
+ border-radius:0;
1864
1948
  overflow:hidden;
1865
1949
  padding-right:8px;
1866
1950
  padding:0 4px; }
@@ -1871,22 +1955,24 @@ html.iui-theme-dark{
1871
1955
  outline:1px solid var(--iui-color-foreground-primary); }
1872
1956
  .iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
1873
1957
  outline:0; }
1874
- .iui-page-header .iui-header-split-button .iui-button > .iui-label{
1958
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-label{
1875
1959
  text-align:left;
1876
1960
  font-size:14px;
1877
1961
  overflow:hidden; }
1878
- .iui-page-header .iui-header-split-button .iui-button > .iui-label > div{
1962
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-label > div{
1879
1963
  overflow:hidden;
1880
1964
  text-overflow:ellipsis; }
1881
- .iui-page-header .iui-header-split-button .iui-button > .iui-label .iui-description{
1965
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
1882
1966
  height:22px;
1883
1967
  opacity:0.6;
1884
1968
  opacity:var(--iui-opacity-3); }
1885
1969
  @media (prefers-reduced-motion: no-preference){
1886
- .iui-page-header .iui-header-split-button .iui-button > .iui-label .iui-description{
1970
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
1887
1971
  transition:all 0.2s ease; } }
1888
- .iui-page-header .iui-header-split-button .iui-button > .iui-icon{
1972
+ .iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
1889
1973
  flex-shrink:0; }
1974
+ .iui-page-header .iui-header-split-button .iui-button > * + *{
1975
+ margin-left:12px; }
1890
1976
  .iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
1891
1977
  padding:4px;
1892
1978
  width:16px;
@@ -1912,7 +1998,7 @@ html.iui-theme-dark{
1912
1998
  background-color:rgba(0, 139, 225, 0.1);
1913
1999
  fill:var(--iui-icons-color-primary);
1914
2000
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
1915
- .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-label{
2001
+ .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
1916
2002
  color:#008BE1;
1917
2003
  color:var(--iui-color-foreground-primary); }
1918
2004
  .iui-page-header .iui-header-split-button .iui-button.iui-active:focus{
@@ -1943,7 +2029,7 @@ html.iui-theme-dark{
1943
2029
  width:12px;
1944
2030
  height:12px;
1945
2031
  padding:2px; }
1946
- .iui-page-header.iui-slim > .iui-left .iui-button .iui-label .iui-description{
2032
+ .iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
1947
2033
  opacity:0;
1948
2034
  height:0.1px;
1949
2035
  width:0.1px;
@@ -1964,7 +2050,7 @@ html.iui-theme-dark{
1964
2050
  background-color:rgba(0, 139, 225, 0.1);
1965
2051
  fill:var(--iui-icons-color-primary);
1966
2052
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
1967
- .iui-page-header .iui-header-split-button.iui-active .iui-label{
2053
+ .iui-page-header .iui-header-split-button.iui-active .iui-button-label{
1968
2054
  color:#008BE1;
1969
2055
  color:var(--iui-color-foreground-primary); }
1970
2056
  .iui-page-header .iui-header-split-button.iui-active:focus{
@@ -2069,7 +2155,7 @@ html.iui-theme-dark{
2069
2155
  width:0.1px;
2070
2156
  margin:0;
2071
2157
  padding:0; }
2072
- .iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-label{
2158
+ .iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-button-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-button-label{
2073
2159
  margin-left:0; } }
2074
2160
  @media (max-width: 1024px){
2075
2161
  .iui-page-header .iui-left .iui-header-logo > .iui-label{
@@ -3097,22 +3183,14 @@ html.iui-theme-dark{
3097
3183
  .iui-checkbox .iui-radio-dot svg:not(.iui-radial){
3098
3184
  width:12px;
3099
3185
  height:12px; }
3100
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > path,
3101
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
3102
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
3103
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
3104
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
3105
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > g{
3186
+ .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3187
+ .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
3106
3188
  opacity:0;
3107
3189
  fill:#008BE1;
3108
3190
  fill:var(--iui-icons-color-primary); }
3109
3191
  @media (prefers-reduced-motion: no-preference){
3110
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > path,
3111
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
3112
- .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
3113
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
3114
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
3115
- .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > g{
3192
+ .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3193
+ .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
3116
3194
  transition:opacity 0.2s ease; } }
3117
3195
  .iui-checkbox > .iui-label{
3118
3196
  margin-right:8px; }
@@ -3195,8 +3273,8 @@ html.iui-theme-dark{
3195
3273
  .iui-checkbox.iui-loading input:disabled ~ .iui-label{
3196
3274
  cursor:wait; }
3197
3275
  .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
3198
- background-color:#f2f2f2;
3199
- background-color:var(--iui-color-background-1-overlay); }
3276
+ background-color:rgba(0, 0, 0, 0.1);
3277
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
3200
3278
  .iui-checkbox-visibility input ~ .iui-checkbox-checkmark,
3201
3279
  .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
3202
3280
  border:none; }
@@ -3208,9 +3286,11 @@ html.iui-theme-dark{
3208
3286
  .iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
3209
3287
  .iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
3210
3288
  opacity:0; }
3211
- .iui-checkbox-visibility input ~ .iui-checkbox-checkmark > svg > .iui-uncheck{
3289
+ .iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
3212
3290
  opacity:1;
3213
- transition:opacity 0.2s ease; }
3291
+ transition:opacity 0.2s ease;
3292
+ fill:rgba(0, 0, 0, 0.8);
3293
+ fill:var(--iui-icons-color-actionable); }
3214
3294
 
3215
3295
  .iui-radio{
3216
3296
  margin:0;
@@ -3258,22 +3338,14 @@ html.iui-theme-dark{
3258
3338
  .iui-radio .iui-radio-dot svg:not(.iui-radial){
3259
3339
  width:12px;
3260
3340
  height:12px; }
3261
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > path,
3262
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
3263
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
3264
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
3265
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
3266
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > g{
3341
+ .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3342
+ .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
3267
3343
  opacity:0;
3268
3344
  fill:#008BE1;
3269
3345
  fill:var(--iui-icons-color-primary); }
3270
3346
  @media (prefers-reduced-motion: no-preference){
3271
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > path,
3272
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
3273
- .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
3274
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
3275
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
3276
- .iui-radio .iui-radio-dot svg:not(.iui-radial) > g{
3347
+ .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
3348
+ .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
3277
3349
  transition:opacity 0.2s ease; } }
3278
3350
  .iui-radio > .iui-label{
3279
3351
  margin-right:8px; }
@@ -4404,10 +4476,11 @@ html.iui-theme-dark{
4404
4476
  .iui-side-navigation.iui-expanded,
4405
4477
  .iui-side-navigation > .iui-sidenav-content{
4406
4478
  max-width:288px; }
4407
- .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-icon,
4408
- .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-icon{
4479
+ .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
4480
+ .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
4409
4481
  transform:scaleX(-1); }
4410
4482
  .iui-side-navigation .iui-sidenav-button{
4483
+ gap:24px;
4411
4484
  border-radius:0;
4412
4485
  border-left:none;
4413
4486
  border-right:none;
@@ -4418,28 +4491,33 @@ html.iui-theme-dark{
4418
4491
  @supports (padding: max(0px)){
4419
4492
  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
4420
4493
  padding-left:max(24px, 24px + env(safe-area-inset-left)); } }
4421
- .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:enabled:hover, .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:focus-visible{
4494
+ .iui-side-navigation .iui-sidenav-button > .iui-button-label{
4495
+ white-space:nowrap;
4496
+ overflow:hidden;
4497
+ text-overflow:ellipsis; }
4498
+ .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:focus{
4499
+ border-color:#C7CCD1;
4500
+ border-color:var(--iui-color-background-5); }
4501
+ .iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
4422
4502
  border-color:#C7CCD1;
4423
4503
  border-color:var(--iui-color-background-5); }
4424
- .iui-side-navigation .iui-sidenav-button > .iui-icon:not(.iui-user-icon){
4504
+ .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
4425
4505
  width:24px;
4426
4506
  height:24px;
4427
4507
  flex-shrink:0; }
4428
- .iui-side-navigation .iui-sidenav-button > .iui-icon:not(.iui-user-icon) + .iui-label{
4429
- margin-left:24px;
4430
- white-space:nowrap;
4431
- overflow:hidden;
4432
- text-overflow:ellipsis; }
4433
- .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-icon{
4508
+ .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
4434
4509
  fill:#008BE1;
4435
4510
  fill:var(--iui-color-foreground-primary); }
4436
- .iui-side-navigation .iui-sidenav-button.iui-active:focus, .iui-side-navigation .iui-sidenav-button.iui-active:focus-visible{
4437
- box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
4438
- box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
4439
- .iui-side-navigation .iui-sidenav-button.iui-active, .iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
4511
+ .iui-side-navigation .iui-sidenav-button.iui-active{
4440
4512
  box-shadow:inset 2px 0 0 0 #008BE1;
4441
4513
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
4442
- .iui-side-navigation .iui-sidenav-button[disabled]{
4514
+ .iui-side-navigation .iui-sidenav-button.iui-active:focus{
4515
+ box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
4516
+ box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
4517
+ .iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
4518
+ box-shadow:inset 2px 0 0 0 #008BE1;
4519
+ box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
4520
+ .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
4443
4521
  background-color:#F8F9FB;
4444
4522
  background-color:var(--iui-color-background-2); }
4445
4523
  .iui-side-navigation .iui-sidenav-button:focus{
@@ -4448,35 +4526,32 @@ html.iui-theme-dark{
4448
4526
  box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
4449
4527
  .iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
4450
4528
  box-shadow:none; }
4451
- .iui-side-navigation .iui-sidenav-button:focus-visible{
4452
- outline:0;
4453
- box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
4454
4529
  .iui-side-navigation .iui-sidenav-button.iui-expand{
4455
4530
  height:22px;
4456
4531
  justify-content:center;
4457
4532
  border:none;
4458
4533
  border-bottom:1px solid #C7CCD1;
4459
4534
  border-bottom:1px solid var(--iui-color-background-5); }
4460
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
4535
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
4461
4536
  fill:rgba(0, 0, 0, 0.4);
4462
4537
  fill:var(--iui-icons-color);
4463
4538
  display:inline-flex;
4464
4539
  width:12px;
4465
4540
  height:12px; }
4466
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-informational{
4541
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
4467
4542
  fill:#008BE1;
4468
4543
  fill:var(--iui-icons-color-primary); }
4469
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-positive{
4544
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
4470
4545
  fill:#53A21A;
4471
4546
  fill:var(--iui-icons-color-positive); }
4472
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-warning{
4547
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
4473
4548
  fill:#F18B12;
4474
4549
  fill:var(--iui-icons-color-warning); }
4475
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-negative{
4550
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
4476
4551
  fill:#D30A0A;
4477
4552
  fill:var(--iui-icons-color-negative); }
4478
4553
  @media (prefers-reduced-motion: no-preference){
4479
- .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
4554
+ .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
4480
4555
  transition:transform 0.4s ease-out; } }
4481
4556
 
4482
4557
  .iui-side-navigation-submenu{
@@ -4825,7 +4900,7 @@ html.iui-theme-dark{
4825
4900
  .iui-table-body .iui-row:not(.iui-disabled):focus-within > .iui-slot > .iui-more-options{
4826
4901
  visibility:visible; }
4827
4902
  @media (prefers-reduced-motion: no-preference){
4828
- .iui-table-body .iui-row .iui-row-expander > .iui-icon{
4903
+ .iui-table-body .iui-row .iui-row-expander > .iui-button-icon{
4829
4904
  transition:transform 0.2s ease-out; } }
4830
4905
  .iui-table-body .iui-row.iui-row-expanded{
4831
4906
  overflow:hidden;
@@ -4835,7 +4910,7 @@ html.iui-theme-dark{
4835
4910
  border-left-color:var(--iui-color-background-4);
4836
4911
  border-right-color:var(--iui-color-background-4);
4837
4912
  border-bottom-color:transparent; }
4838
- .iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-icon{
4913
+ .iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-button-icon{
4839
4914
  transform:rotate(90deg); }
4840
4915
  .iui-table-body .iui-row.iui-row-expanded + .iui-expanded-content{
4841
4916
  border-left-color:#DCE0E3;
@@ -5580,57 +5655,60 @@ a.iui-tag{
5580
5655
  border-bottom:1px solid var(--iui-color-background-4); }
5581
5656
  .iui-tile .iui-thumbnail > .iui-type-indicator,
5582
5657
  .iui-tile .iui-thumbnail > .iui-quick-action{
5583
- background-color:transparent;
5584
5658
  border-color:transparent;
5659
+ background-color:transparent;
5585
5660
  padding:0 8px;
5661
+ height:38px;
5662
+ gap:8px;
5663
+ padding:0 2px;
5664
+ height:27px;
5665
+ gap:4px;
5586
5666
  position:absolute;
5587
5667
  border-radius:50%;
5588
5668
  top:6px; }
5589
- .iui-tile .iui-thumbnail > .iui-type-indicator.iui-small,
5590
- .iui-tile .iui-thumbnail > .iui-quick-action.iui-small{
5591
- padding:0 2px; }
5592
- .iui-tile .iui-thumbnail > .iui-type-indicator.iui-large,
5593
- .iui-tile .iui-thumbnail > .iui-quick-action.iui-large{
5594
- padding:0 12px; }
5595
- .iui-tile .iui-thumbnail > .iui-type-indicator > .iui-icon:only-child,
5596
- .iui-tile .iui-thumbnail > .iui-quick-action > .iui-icon:only-child{
5669
+ .iui-tile .iui-thumbnail > .iui-type-indicator > .iui-button-icon:only-child,
5670
+ .iui-tile .iui-thumbnail > .iui-quick-action > .iui-button-icon:only-child{
5597
5671
  margin-left:3px;
5598
5672
  margin-right:3px; }
5599
- .iui-tile .iui-thumbnail > .iui-type-indicator:enabled:hover, .iui-tile .iui-thumbnail > .iui-type-indicator:enabled:active, .iui-tile .iui-thumbnail > .iui-type-indicator:focus-visible,
5600
- .iui-tile .iui-thumbnail > .iui-quick-action:enabled:hover,
5601
- .iui-tile .iui-thumbnail > .iui-quick-action:enabled:active,
5602
- .iui-tile .iui-thumbnail > .iui-quick-action:focus-visible{
5673
+ .iui-tile .iui-thumbnail > .iui-type-indicator:hover, .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
5674
+ .iui-tile .iui-thumbnail > .iui-quick-action:hover,
5675
+ .iui-tile .iui-thumbnail > .iui-quick-action:focus{
5603
5676
  background-color:rgba(0, 0, 0, 0.1);
5604
5677
  border-color:transparent;
5605
5678
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
5606
5679
  border-color:transparent; }
5607
- .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active,
5608
- .iui-tile .iui-thumbnail > .iui-quick-action.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled,
5609
- .iui-tile .iui-thumbnail > .iui-quick-action.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover,
5610
- .iui-tile .iui-thumbnail > .iui-quick-action.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
5611
- background:transparent;
5680
+ .iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible),
5681
+ .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible){
5682
+ border-color:transparent;
5683
+ background-color:transparent; }
5684
+ .iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible) > .iui-button-icon:only-child,
5685
+ .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible) > .iui-button-icon:only-child{
5686
+ margin-left:3px;
5687
+ margin-right:3px; }
5688
+ .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active,
5689
+ .iui-tile .iui-thumbnail > .iui-quick-action.iui-active{
5612
5690
  background-color:rgba(0, 139, 225, 0.1);
5691
+ color:#008BE1;
5613
5692
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
5693
+ color:var(--iui-color-foreground-primary);
5614
5694
  border-color:transparent; }
5615
- .iui-tile .iui-thumbnail > .iui-type-indicator[disabled], .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:hover, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:focus,
5695
+ .iui-tile .iui-thumbnail > .iui-type-indicator[disabled], .iui-tile .iui-thumbnail > .iui-type-indicator:disabled,
5616
5696
  .iui-tile .iui-thumbnail > .iui-quick-action[disabled],
5617
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:hover,
5618
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:active,
5619
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:focus{
5697
+ .iui-tile .iui-thumbnail > .iui-quick-action:disabled{
5698
+ cursor:not-allowed;
5699
+ background:#EEF0F3;
5700
+ border-color:#EEF0F3;
5701
+ color:rgba(0, 0, 0, 0.2);
5702
+ background:var(--iui-color-background-disabled);
5703
+ border-color:var(--iui-color-background-disabled);
5704
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
5705
+ background-color:transparent;
5706
+ border-color:transparent;
5620
5707
  background-color:transparent;
5621
5708
  border-color:transparent; }
5622
- .iui-tile .iui-thumbnail > .iui-type-indicator[disabled] > .iui-icon, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:hover > .iui-icon, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:active > .iui-icon, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:focus > .iui-icon,
5623
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled] > .iui-icon,
5624
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:hover > .iui-icon,
5625
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:active > .iui-icon,
5626
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:focus > .iui-icon{
5627
- fill:rgba(0, 0, 0, 0.2);
5628
- fill:var(--iui-icons-color-actionable-disabled); }
5629
- .iui-tile .iui-thumbnail > .iui-type-indicator[disabled].iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:hover.iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:active.iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:focus.iui-active,
5709
+ .iui-tile .iui-thumbnail > .iui-type-indicator[disabled].iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator:disabled.iui-active,
5630
5710
  .iui-tile .iui-thumbnail > .iui-quick-action[disabled].iui-active,
5631
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:hover.iui-active,
5632
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:active.iui-active,
5633
- .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:focus.iui-active{
5711
+ .iui-tile .iui-thumbnail > .iui-quick-action:disabled.iui-active{
5634
5712
  background-color:rgba(0, 0, 0, 0.05);
5635
5713
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
5636
5714
  .iui-tile .iui-thumbnail > .iui-type-indicator{
@@ -5703,8 +5781,8 @@ a.iui-tag{
5703
5781
  backdrop-filter:blur(5px);
5704
5782
  background-color:rgba(0, 0, 0, var(--iui-opacity-5));
5705
5783
  backdrop-filter:blur(5px); } }
5706
- .iui-tile .iui-thumbnail > .iui-picture + .iui-button:enabled > .iui-icon,
5707
- .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:enabled > .iui-icon{
5784
+ .iui-tile .iui-thumbnail > .iui-picture + .iui-button:enabled > .iui-button-icon,
5785
+ .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:enabled > .iui-button-icon{
5708
5786
  fill:#FFF;
5709
5787
  filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
5710
5788
  fill:var(--iui-color-foreground-accessory);
@@ -5716,11 +5794,11 @@ a.iui-tag{
5716
5794
  .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active{
5717
5795
  background-color:rgba(0, 0, 0, 0.4);
5718
5796
  background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
5719
- .iui-tile .iui-thumbnail > .iui-picture + .iui-button:hover > .iui-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled > .iui-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled:hover > .iui-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:active > .iui-icon,
5720
- .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:hover > .iui-icon,
5721
- .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled > .iui-icon,
5722
- .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled:hover > .iui-icon,
5723
- .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active > .iui-icon{
5797
+ .iui-tile .iui-thumbnail > .iui-picture + .iui-button:hover .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled:hover .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:active .iui-button-icon,
5798
+ .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:hover .iui-button-icon,
5799
+ .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled .iui-button-icon,
5800
+ .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled:hover .iui-button-icon,
5801
+ .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active .iui-button-icon{
5724
5802
  fill:#FFF;
5725
5803
  fill:var(--iui-color-foreground-accessory); }
5726
5804
  .iui-tile > .iui-content{
@@ -5823,6 +5901,9 @@ a.iui-tag{
5823
5901
  overflow:hidden;
5824
5902
  text-overflow:ellipsis; }
5825
5903
  .iui-tile > .iui-content > .iui-more-options{
5904
+ padding:0 2px;
5905
+ height:27px;
5906
+ gap:4px;
5826
5907
  position:absolute;
5827
5908
  bottom:5.5px;
5828
5909
  right:8px;