@trismegisto/core 2.1.2 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/core.css +691 -124
  2. package/package.json +1 -1
package/dist/core.css CHANGED
@@ -768,6 +768,9 @@ hm-button:has(> .hm-btn--block),
768
768
  color: var(--hm-disabled-text);
769
769
  cursor: not-allowed;
770
770
  }
771
+ .hm-btn:is(:disabled, [aria-disabled=true]):not(.hm-btn--loading-loading, .hm-btn--loading-success, .hm-btn--loading-error).hm-btn--medium {
772
+ border-color: var(--hm-disabled-text);
773
+ }
771
774
  .hm-btn:is(:disabled, [aria-disabled=true]):not(.hm-btn--loading-loading, .hm-btn--loading-success, .hm-btn--loading-error).hm-btn--minimal {
772
775
  border-color: transparent;
773
776
  background: transparent;
@@ -846,10 +849,14 @@ hm-button:has(> .hm-btn--block),
846
849
  }
847
850
 
848
851
  @media (prefers-reduced-motion: reduce) {
849
- .hm-btn {
852
+ :where(:root:not([data-motion])) .hm-btn {
850
853
  transition: none;
851
854
  }
852
855
  }
856
+ :where(:root[data-motion=reduce]) .hm-btn {
857
+ transition: none;
858
+ }
859
+
853
860
  @media (forced-colors: active) {
854
861
  .hm-btn {
855
862
  border-color: ButtonText;
@@ -958,13 +965,20 @@ hm-button:has(> .hm-btn--block),
958
965
  }
959
966
 
960
967
  @media (prefers-reduced-motion: reduce) {
961
- .hm-spinner, .hm-btn__spinner {
968
+ :where(:root:not([data-motion])) .hm-spinner, :where(:root:not([data-motion])) .hm-btn__spinner {
962
969
  animation-duration: 1.4s;
963
970
  }
964
- .hm-btn__icon--resolved {
971
+ :where(:root:not([data-motion])) .hm-btn__icon--resolved {
965
972
  animation: none;
966
973
  }
967
974
  }
975
+ :where(:root[data-motion=reduce]) .hm-spinner, :where(:root[data-motion=reduce]) .hm-btn__spinner {
976
+ animation-duration: 1.4s;
977
+ }
978
+ :where(:root[data-motion=reduce]) .hm-btn__icon--resolved {
979
+ animation: none;
980
+ }
981
+
968
982
  /* Alto contraste: o anel é borda translúcida + topo em currentcolor; o navegador pintaria as quatro
969
983
  bordas da mesma cor e o giro ficaria invisível. Trilha em GrayText, arco em CanvasText. */
970
984
  @media (forced-colors: active) {
@@ -1107,10 +1121,14 @@ hm-icon-button,
1107
1121
  }
1108
1122
 
1109
1123
  @media (prefers-reduced-motion: reduce) {
1110
- .hm-icon-btn {
1124
+ :where(:root:not([data-motion])) .hm-icon-btn {
1111
1125
  transition: none;
1112
1126
  }
1113
1127
  }
1128
+ :where(:root[data-motion=reduce]) .hm-icon-btn {
1129
+ transition: none;
1130
+ }
1131
+
1114
1132
  @media (forced-colors: active) {
1115
1133
  .hm-icon-btn {
1116
1134
  border-color: ButtonText;
@@ -1997,15 +2015,24 @@ hm-alert[hidden] {
1997
2015
  }
1998
2016
 
1999
2017
  @media (prefers-reduced-motion: reduce) {
2000
- .hm-alert {
2018
+ :where(:root:not([data-motion])) .hm-alert {
2001
2019
  transition-duration: 1ms;
2002
2020
  }
2003
2021
  @starting-style {
2004
- .hm-alert {
2022
+ :where(:root:not([data-motion])) .hm-alert {
2005
2023
  transform: none;
2006
2024
  }
2007
2025
  }
2008
2026
  }
2027
+ :where(:root[data-motion=reduce]) .hm-alert {
2028
+ transition-duration: 1ms;
2029
+ }
2030
+ @starting-style {
2031
+ :where(:root[data-motion=reduce]) .hm-alert {
2032
+ transform: none;
2033
+ }
2034
+ }
2035
+
2009
2036
  /* ── Faixa paginada ──────────────────────────────────────────────────────────────────────────── */
2010
2037
  .hm-alert-group {
2011
2038
  --hm-alert-tone: var(--hm-info);
@@ -2382,13 +2409,20 @@ hm-theme-picker {
2382
2409
  }
2383
2410
 
2384
2411
  @media (prefers-reduced-motion: reduce) {
2385
- .hm-theme-picker__option {
2412
+ :where(:root:not([data-motion])) .hm-theme-picker__option {
2386
2413
  transition: none;
2387
2414
  }
2388
- .hm-theme-picker__option:hover {
2415
+ :where(:root:not([data-motion])) .hm-theme-picker__option:hover {
2389
2416
  translate: none;
2390
2417
  }
2391
2418
  }
2419
+ :where(:root[data-motion=reduce]) .hm-theme-picker__option {
2420
+ transition: none;
2421
+ }
2422
+ :where(:root[data-motion=reduce]) .hm-theme-picker__option:hover {
2423
+ translate: none;
2424
+ }
2425
+
2392
2426
  @media (forced-colors: active) {
2393
2427
  .hm-theme-picker__option {
2394
2428
  border-color: ButtonBorder;
@@ -2479,10 +2513,14 @@ hm-geometric-texture,
2479
2513
  }
2480
2514
 
2481
2515
  @media (prefers-reduced-motion: no-preference) {
2482
- .hm-texture {
2516
+ :where(:root:not([data-motion])) .hm-texture {
2483
2517
  animation: hm-texture-cycle var(--texture-cycle) var(--hm-ease-standard) infinite both;
2484
2518
  }
2485
2519
  }
2520
+ :where(:root[data-motion=full]) .hm-texture {
2521
+ animation: hm-texture-cycle var(--texture-cycle) var(--hm-ease-standard) infinite both;
2522
+ }
2523
+
2486
2524
  @keyframes hm-texture-cycle {
2487
2525
  0% {
2488
2526
  opacity: 0;
@@ -2550,10 +2588,14 @@ hm-loading-square, .hm-loading-square-host {
2550
2588
  }
2551
2589
  }
2552
2590
  @media (prefers-reduced-motion: reduce) {
2553
- .hm-square-loader {
2591
+ :where(:root:not([data-motion])) .hm-square-loader {
2554
2592
  animation-duration: 2s;
2555
2593
  }
2556
2594
  }
2595
+ :where(:root[data-motion=reduce]) .hm-square-loader {
2596
+ animation-duration: 2s;
2597
+ }
2598
+
2557
2599
  /* Alto contraste: os quatro quadrados são desenhados só com `box-shadow`, que o navegador remove —
2558
2600
  o carregador sumiria inteiro. `forced-color-adjust: none` é justificado aqui: não há outro jeito
2559
2601
  de manter as sombras; as cores passam a ser de sistema (CanvasText = quadrado aceso, GrayText =
@@ -2683,11 +2725,15 @@ hm-skeleton,
2683
2725
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
2684
2726
  }
2685
2727
  @media (prefers-reduced-motion: reduce) {
2686
- .hm-skeleton__line {
2728
+ :where(:root:not([data-motion])) .hm-skeleton__line {
2687
2729
  animation: none;
2688
2730
  background-position: 50% 0;
2689
2731
  }
2690
2732
  }
2733
+ :where(:root[data-motion=reduce]) .hm-skeleton__line {
2734
+ animation: none;
2735
+ background-position: 50% 0;
2736
+ }
2691
2737
  @media (forced-colors: active) {
2692
2738
  .hm-skeleton__line {
2693
2739
  forced-color-adjust: none;
@@ -2713,11 +2759,15 @@ hm-skeleton,
2713
2759
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
2714
2760
  }
2715
2761
  @media (prefers-reduced-motion: reduce) {
2716
- .hm-skeleton__icon {
2762
+ :where(:root:not([data-motion])) .hm-skeleton__icon {
2717
2763
  animation: none;
2718
2764
  background-position: 50% 0;
2719
2765
  }
2720
2766
  }
2767
+ :where(:root[data-motion=reduce]) .hm-skeleton__icon {
2768
+ animation: none;
2769
+ background-position: 50% 0;
2770
+ }
2721
2771
  @media (forced-colors: active) {
2722
2772
  .hm-skeleton__icon {
2723
2773
  forced-color-adjust: none;
@@ -2745,11 +2795,15 @@ hm-skeleton,
2745
2795
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
2746
2796
  }
2747
2797
  @media (prefers-reduced-motion: reduce) {
2748
- .hm-skeleton__badge {
2798
+ :where(:root:not([data-motion])) .hm-skeleton__badge {
2749
2799
  animation: none;
2750
2800
  background-position: 50% 0;
2751
2801
  }
2752
2802
  }
2803
+ :where(:root[data-motion=reduce]) .hm-skeleton__badge {
2804
+ animation: none;
2805
+ background-position: 50% 0;
2806
+ }
2753
2807
  @media (forced-colors: active) {
2754
2808
  .hm-skeleton__badge {
2755
2809
  forced-color-adjust: none;
@@ -2777,11 +2831,15 @@ hm-skeleton,
2777
2831
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
2778
2832
  }
2779
2833
  @media (prefers-reduced-motion: reduce) {
2780
- .hm-skeleton__chip {
2834
+ :where(:root:not([data-motion])) .hm-skeleton__chip {
2781
2835
  animation: none;
2782
2836
  background-position: 50% 0;
2783
2837
  }
2784
2838
  }
2839
+ :where(:root[data-motion=reduce]) .hm-skeleton__chip {
2840
+ animation: none;
2841
+ background-position: 50% 0;
2842
+ }
2785
2843
  @media (forced-colors: active) {
2786
2844
  .hm-skeleton__chip {
2787
2845
  forced-color-adjust: none;
@@ -2809,11 +2867,15 @@ hm-skeleton,
2809
2867
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
2810
2868
  }
2811
2869
  @media (prefers-reduced-motion: reduce) {
2812
- .hm-skeleton__row {
2870
+ :where(:root:not([data-motion])) .hm-skeleton__row {
2813
2871
  animation: none;
2814
2872
  background-position: 50% 0;
2815
2873
  }
2816
2874
  }
2875
+ :where(:root[data-motion=reduce]) .hm-skeleton__row {
2876
+ animation: none;
2877
+ background-position: 50% 0;
2878
+ }
2817
2879
  @media (forced-colors: active) {
2818
2880
  .hm-skeleton__row {
2819
2881
  forced-color-adjust: none;
@@ -2840,11 +2902,15 @@ hm-skeleton,
2840
2902
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
2841
2903
  }
2842
2904
  @media (prefers-reduced-motion: reduce) {
2843
- .hm-skeleton__heading {
2905
+ :where(:root:not([data-motion])) .hm-skeleton__heading {
2844
2906
  animation: none;
2845
2907
  background-position: 50% 0;
2846
2908
  }
2847
2909
  }
2910
+ :where(:root[data-motion=reduce]) .hm-skeleton__heading {
2911
+ animation: none;
2912
+ background-position: 50% 0;
2913
+ }
2848
2914
  @media (forced-colors: active) {
2849
2915
  .hm-skeleton__heading {
2850
2916
  forced-color-adjust: none;
@@ -2871,11 +2937,15 @@ hm-skeleton,
2871
2937
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
2872
2938
  }
2873
2939
  @media (prefers-reduced-motion: reduce) {
2874
- .hm-skeleton__panel {
2940
+ :where(:root:not([data-motion])) .hm-skeleton__panel {
2875
2941
  animation: none;
2876
2942
  background-position: 50% 0;
2877
2943
  }
2878
2944
  }
2945
+ :where(:root[data-motion=reduce]) .hm-skeleton__panel {
2946
+ animation: none;
2947
+ background-position: 50% 0;
2948
+ }
2879
2949
  @media (forced-colors: active) {
2880
2950
  .hm-skeleton__panel {
2881
2951
  forced-color-adjust: none;
@@ -2953,11 +3023,15 @@ hm-account-avatar, .hm-account-avatar-host {
2953
3023
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
2954
3024
  }
2955
3025
  @media (prefers-reduced-motion: reduce) {
2956
- .hm-avatar__skeleton {
3026
+ :where(:root:not([data-motion])) .hm-avatar__skeleton {
2957
3027
  animation: none;
2958
3028
  background-position: 50% 0;
2959
3029
  }
2960
3030
  }
3031
+ :where(:root[data-motion=reduce]) .hm-avatar__skeleton {
3032
+ animation: none;
3033
+ background-position: 50% 0;
3034
+ }
2961
3035
  @media (forced-colors: active) {
2962
3036
  .hm-avatar__skeleton {
2963
3037
  forced-color-adjust: none;
@@ -3194,10 +3268,13 @@ hm-bubble {
3194
3268
  }
3195
3269
  }
3196
3270
  @media (prefers-reduced-motion: reduce) {
3197
- .hm-bubble__reaction {
3271
+ :where(:root:not([data-motion])) .hm-bubble__reaction {
3198
3272
  transition: none;
3199
3273
  }
3200
3274
  }
3275
+ :where(:root[data-motion=reduce]) .hm-bubble__reaction {
3276
+ transition: none;
3277
+ }
3201
3278
  .hm-bubble__count {
3202
3279
  font-variant-numeric: tabular-nums;
3203
3280
  }
@@ -3222,10 +3299,13 @@ hm-bubble {
3222
3299
  animation-delay: calc(var(--hm-duration-quick) * 2);
3223
3300
  }
3224
3301
  @media (prefers-reduced-motion: reduce) {
3225
- .hm-bubble__typing > span {
3302
+ :where(:root:not([data-motion])) .hm-bubble__typing > span {
3226
3303
  animation: none;
3227
3304
  }
3228
3305
  }
3306
+ :where(:root[data-motion=reduce]) .hm-bubble__typing > span {
3307
+ animation: none;
3308
+ }
3229
3309
 
3230
3310
  @keyframes hm-bubble-typing {
3231
3311
  0%, 60%, 100% {
@@ -3391,10 +3471,13 @@ hm-message-scroller {
3391
3471
  }
3392
3472
  }
3393
3473
  @media (prefers-reduced-motion: reduce) {
3394
- .hm-message-scroller__jump {
3474
+ :where(:root:not([data-motion])) .hm-message-scroller__jump {
3395
3475
  transition: none;
3396
3476
  }
3397
3477
  }
3478
+ :where(:root[data-motion=reduce]) .hm-message-scroller__jump {
3479
+ transition: none;
3480
+ }
3398
3481
  .hm-message-scroller__count {
3399
3482
  font-variant-numeric: tabular-nums;
3400
3483
  white-space: nowrap;
@@ -3591,14 +3674,22 @@ hm-header {
3591
3674
  }
3592
3675
  }
3593
3676
  @media (prefers-reduced-motion: reduce) {
3594
- .hm-header__search {
3677
+ :where(:root:not([data-motion])) .hm-header__search {
3595
3678
  animation: none;
3596
3679
  }
3597
- .hm-header__nav-toggle,
3598
- .hm-header__search {
3680
+ :where(:root:not([data-motion])) .hm-header__nav-toggle,
3681
+ :where(:root:not([data-motion])) .hm-header__search {
3599
3682
  transition: none;
3600
3683
  }
3601
3684
  }
3685
+ :where(:root[data-motion=reduce]) .hm-header__search {
3686
+ animation: none;
3687
+ }
3688
+ :where(:root[data-motion=reduce]) .hm-header__nav-toggle,
3689
+ :where(:root[data-motion=reduce]) .hm-header__search {
3690
+ transition: none;
3691
+ }
3692
+
3602
3693
  @media (forced-colors: active) {
3603
3694
  .hm-header__nav-toggle,
3604
3695
  .hm-header__search {
@@ -4042,24 +4133,42 @@ hm-sidebar-group,
4042
4133
  }
4043
4134
  }
4044
4135
  @media (prefers-reduced-motion: reduce) {
4045
- .hm-sidebar,
4046
- .hm-sidebar.hm-sidebar--overlaid,
4047
- .hm-sidebar.hm-sidebar--open,
4048
- .hm-sidebar-group__panel,
4049
- .hm-sidebar-group__body,
4050
- .hm-sidebar-group__chevron {
4136
+ :where(:root:not([data-motion])) .hm-sidebar,
4137
+ :where(:root:not([data-motion])) .hm-sidebar.hm-sidebar--overlaid,
4138
+ :where(:root:not([data-motion])) .hm-sidebar.hm-sidebar--open,
4139
+ :where(:root:not([data-motion])) .hm-sidebar-group__panel,
4140
+ :where(:root:not([data-motion])) .hm-sidebar-group__body,
4141
+ :where(:root:not([data-motion])) .hm-sidebar-group__chevron {
4051
4142
  transition-duration: 0s;
4052
4143
  transition-delay: 0s;
4053
4144
  }
4054
- .hm-sidebar__level--enter {
4145
+ :where(:root:not([data-motion])) .hm-sidebar__level--enter {
4055
4146
  animation: none;
4056
4147
  }
4057
- .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar__fade,
4058
- .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar-link__text,
4059
- .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar-group__label {
4148
+ :where(:root:not([data-motion])) .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar__fade,
4149
+ :where(:root:not([data-motion])) .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar-link__text,
4150
+ :where(:root:not([data-motion])) .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar-group__label {
4060
4151
  animation: none;
4061
4152
  }
4062
4153
  }
4154
+ :where(:root[data-motion=reduce]) .hm-sidebar,
4155
+ :where(:root[data-motion=reduce]) .hm-sidebar.hm-sidebar--overlaid,
4156
+ :where(:root[data-motion=reduce]) .hm-sidebar.hm-sidebar--open,
4157
+ :where(:root[data-motion=reduce]) .hm-sidebar-group__panel,
4158
+ :where(:root[data-motion=reduce]) .hm-sidebar-group__body,
4159
+ :where(:root[data-motion=reduce]) .hm-sidebar-group__chevron {
4160
+ transition-duration: 0s;
4161
+ transition-delay: 0s;
4162
+ }
4163
+ :where(:root[data-motion=reduce]) .hm-sidebar__level--enter {
4164
+ animation: none;
4165
+ }
4166
+ :where(:root[data-motion=reduce]) .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar__fade,
4167
+ :where(:root[data-motion=reduce]) .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar-link__text,
4168
+ :where(:root[data-motion=reduce]) .hm-sidebar:not(.hm-sidebar--compact) .hm-sidebar-group__label {
4169
+ animation: none;
4170
+ }
4171
+
4063
4172
  @media (forced-colors: active) {
4064
4173
  .hm-sidebar {
4065
4174
  border-inline-end-color: CanvasText;
@@ -4132,10 +4241,13 @@ hm-menu {
4132
4241
  }
4133
4242
  }
4134
4243
  @media (prefers-reduced-motion: reduce) {
4135
- .hm-menu {
4244
+ :where(:root:not([data-motion])) .hm-menu {
4136
4245
  transition: none;
4137
4246
  }
4138
4247
  }
4248
+ :where(:root[data-motion=reduce]) .hm-menu {
4249
+ transition: none;
4250
+ }
4139
4251
  .hm-menu {
4140
4252
  z-index: calc(var(--hm-z-menu) + 1);
4141
4253
  }
@@ -4323,10 +4435,13 @@ hm-menu {
4323
4435
  }
4324
4436
  }
4325
4437
  @media (prefers-reduced-motion: reduce) {
4326
- .hm-menu__sub {
4438
+ :where(:root:not([data-motion])) .hm-menu__sub {
4327
4439
  transition: none;
4328
4440
  }
4329
4441
  }
4442
+ :where(:root[data-motion=reduce]) .hm-menu__sub {
4443
+ transition: none;
4444
+ }
4330
4445
  .hm-menu__sub {
4331
4446
  z-index: calc(var(--hm-z-menu) + 2);
4332
4447
  }
@@ -4411,10 +4526,13 @@ hm-menu {
4411
4526
  cursor: not-allowed;
4412
4527
  }
4413
4528
  @media (prefers-reduced-motion: reduce) {
4414
- .hm-menu__item {
4529
+ :where(:root:not([data-motion])) .hm-menu__item {
4415
4530
  transition: none;
4416
4531
  }
4417
4532
  }
4533
+ :where(:root[data-motion=reduce]) .hm-menu__item {
4534
+ transition: none;
4535
+ }
4418
4536
 
4419
4537
  .hm-menu__label {
4420
4538
  flex: 1 1 auto;
@@ -4532,10 +4650,13 @@ hm-menu-button,
4532
4650
  border-radius: 50%;
4533
4651
  }
4534
4652
  @media (prefers-reduced-motion: reduce) {
4535
- .hm-menu-button {
4653
+ :where(:root:not([data-motion])) .hm-menu-button {
4536
4654
  transition: none;
4537
4655
  }
4538
4656
  }
4657
+ :where(:root[data-motion=reduce]) .hm-menu-button {
4658
+ transition: none;
4659
+ }
4539
4660
  @media (forced-colors: active) {
4540
4661
  .hm-menu-button:focus-visible {
4541
4662
  outline-color: Highlight;
@@ -4594,10 +4715,13 @@ hm-menu-button,
4594
4715
  cursor: not-allowed;
4595
4716
  }
4596
4717
  @media (prefers-reduced-motion: reduce) {
4597
- .hm-menubar__trigger {
4718
+ :where(:root:not([data-motion])) .hm-menubar__trigger {
4598
4719
  transition: none;
4599
4720
  }
4600
4721
  }
4722
+ :where(:root[data-motion=reduce]) .hm-menubar__trigger {
4723
+ transition: none;
4724
+ }
4601
4725
 
4602
4726
  @media (forced-colors: active) {
4603
4727
  .hm-menubar {
@@ -4830,14 +4954,22 @@ hm-menu-button,
4830
4954
  }
4831
4955
  }
4832
4956
  @media (prefers-reduced-motion: reduce) {
4833
- .hm-navigation-menu__trigger,
4834
- .hm-navigation-menu__link,
4835
- .hm-navigation-menu__chevron,
4836
- .hm-navigation-menu__panel,
4837
- .hm-navigation-menu-link {
4957
+ :where(:root:not([data-motion])) .hm-navigation-menu__trigger,
4958
+ :where(:root:not([data-motion])) .hm-navigation-menu__link,
4959
+ :where(:root:not([data-motion])) .hm-navigation-menu__chevron,
4960
+ :where(:root:not([data-motion])) .hm-navigation-menu__panel,
4961
+ :where(:root:not([data-motion])) .hm-navigation-menu-link {
4838
4962
  transition: none;
4839
4963
  }
4840
4964
  }
4965
+ :where(:root[data-motion=reduce]) .hm-navigation-menu__trigger,
4966
+ :where(:root[data-motion=reduce]) .hm-navigation-menu__link,
4967
+ :where(:root[data-motion=reduce]) .hm-navigation-menu__chevron,
4968
+ :where(:root[data-motion=reduce]) .hm-navigation-menu__panel,
4969
+ :where(:root[data-motion=reduce]) .hm-navigation-menu-link {
4970
+ transition: none;
4971
+ }
4972
+
4841
4973
  @media (forced-colors: active) {
4842
4974
  .hm-navigation-menu__panel {
4843
4975
  border-color: CanvasText;
@@ -5026,13 +5158,20 @@ hm-tab-bar,
5026
5158
  }
5027
5159
  }
5028
5160
  @media (prefers-reduced-motion: reduce) {
5029
- .hm-tab-bar__tab,
5030
- .hm-tab-bar__close,
5031
- .hm-tab-bar__new {
5161
+ :where(:root:not([data-motion])) .hm-tab-bar__tab,
5162
+ :where(:root:not([data-motion])) .hm-tab-bar__close,
5163
+ :where(:root:not([data-motion])) .hm-tab-bar__new {
5032
5164
  transition: none;
5033
5165
  animation: none;
5034
5166
  }
5035
5167
  }
5168
+ :where(:root[data-motion=reduce]) .hm-tab-bar__tab,
5169
+ :where(:root[data-motion=reduce]) .hm-tab-bar__close,
5170
+ :where(:root[data-motion=reduce]) .hm-tab-bar__new {
5171
+ transition: none;
5172
+ animation: none;
5173
+ }
5174
+
5036
5175
  @media (forced-colors: active) {
5037
5176
  .hm-tab-bar__tab--active {
5038
5177
  forced-color-adjust: none;
@@ -5250,11 +5389,16 @@ hm-toast,
5250
5389
  }
5251
5390
 
5252
5391
  @media (prefers-reduced-motion: reduce) {
5253
- hm-toast,
5254
- .hm-toast {
5392
+ :where(:root:not([data-motion])) hm-toast,
5393
+ :where(:root:not([data-motion])) .hm-toast {
5255
5394
  animation: none;
5256
5395
  }
5257
5396
  }
5397
+ :where(:root[data-motion=reduce]) hm-toast,
5398
+ :where(:root[data-motion=reduce]) .hm-toast {
5399
+ animation: none;
5400
+ }
5401
+
5258
5402
  @media (forced-colors: active) {
5259
5403
  .hm-toast__timer {
5260
5404
  forced-color-adjust: none;
@@ -5300,10 +5444,13 @@ hm-toast,
5300
5444
  }
5301
5445
  }
5302
5446
  @media (prefers-reduced-motion: reduce) {
5303
- .hm-tooltip {
5447
+ :where(:root:not([data-motion])) .hm-tooltip {
5304
5448
  transition: none;
5305
5449
  }
5306
5450
  }
5451
+ :where(:root[data-motion=reduce]) .hm-tooltip {
5452
+ transition: none;
5453
+ }
5307
5454
 
5308
5455
  .hm-toggletip {
5309
5456
  display: inline-flex;
@@ -5348,10 +5495,13 @@ hm-toast,
5348
5495
  visibility: hidden;
5349
5496
  }
5350
5497
  @media (prefers-reduced-motion: reduce) {
5351
- .hm-toggletip__bubble {
5498
+ :where(:root:not([data-motion])) .hm-toggletip__bubble {
5352
5499
  transition: none;
5353
5500
  }
5354
5501
  }
5502
+ :where(:root[data-motion=reduce]) .hm-toggletip__bubble {
5503
+ transition: none;
5504
+ }
5355
5505
  @media (forced-colors: active) {
5356
5506
  .hm-toggletip__bubble {
5357
5507
  border-color: CanvasText;
@@ -5389,10 +5539,13 @@ hm-toast,
5389
5539
  }
5390
5540
  }
5391
5541
  @media (prefers-reduced-motion: reduce) {
5392
- .hm-popover {
5542
+ :where(:root:not([data-motion])) .hm-popover {
5393
5543
  transition: none;
5394
5544
  }
5395
5545
  }
5546
+ :where(:root[data-motion=reduce]) .hm-popover {
5547
+ transition: none;
5548
+ }
5396
5549
  .hm-popover:focus {
5397
5550
  outline: none;
5398
5551
  }
@@ -5743,11 +5896,15 @@ hm-breadcrumb {
5743
5896
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
5744
5897
  }
5745
5898
  @media (prefers-reduced-motion: reduce) {
5746
- .hm-breadcrumb__skeleton-step {
5899
+ :where(:root:not([data-motion])) .hm-breadcrumb__skeleton-step {
5747
5900
  animation: none;
5748
5901
  background-position: 50% 0;
5749
5902
  }
5750
5903
  }
5904
+ :where(:root[data-motion=reduce]) .hm-breadcrumb__skeleton-step {
5905
+ animation: none;
5906
+ background-position: 50% 0;
5907
+ }
5751
5908
  @media (forced-colors: active) {
5752
5909
  .hm-breadcrumb__skeleton-step {
5753
5910
  forced-color-adjust: none;
@@ -5769,11 +5926,16 @@ hm-breadcrumb {
5769
5926
  }
5770
5927
 
5771
5928
  @media (prefers-reduced-motion: reduce) {
5772
- .hm-breadcrumb__link,
5773
- .hm-breadcrumb__expand {
5929
+ :where(:root:not([data-motion])) .hm-breadcrumb__link,
5930
+ :where(:root:not([data-motion])) .hm-breadcrumb__expand {
5774
5931
  transition: none;
5775
5932
  }
5776
5933
  }
5934
+ :where(:root[data-motion=reduce]) .hm-breadcrumb__link,
5935
+ :where(:root[data-motion=reduce]) .hm-breadcrumb__expand {
5936
+ transition: none;
5937
+ }
5938
+
5777
5939
  @media (forced-colors: active) {
5778
5940
  .hm-breadcrumb__link:focus-visible,
5779
5941
  .hm-breadcrumb__expand:focus-visible {
@@ -5872,14 +6034,21 @@ hm-progress {
5872
6034
  }
5873
6035
  }
5874
6036
  @media (prefers-reduced-motion: reduce) {
5875
- .hm-progress__fill {
6037
+ :where(:root:not([data-motion])) .hm-progress__fill {
5876
6038
  transition: none;
5877
6039
  }
5878
- .hm-progress--indeterminate .hm-progress__fill {
6040
+ :where(:root:not([data-motion])) .hm-progress--indeterminate :where(:root:not([data-motion])) .hm-progress__fill {
5879
6041
  inset-inline-start: 30%;
5880
6042
  animation: hm-progress-pulse 1600ms ease-in-out infinite;
5881
6043
  }
5882
6044
  }
6045
+ :where(:root[data-motion=reduce]) .hm-progress__fill {
6046
+ transition: none;
6047
+ }
6048
+ :where(:root[data-motion=reduce]) .hm-progress--indeterminate :where(:root[data-motion=reduce]) .hm-progress__fill {
6049
+ inset-inline-start: 30%;
6050
+ animation: hm-progress-pulse 1600ms ease-in-out infinite;
6051
+ }
5883
6052
 
5884
6053
  @keyframes hm-progress-sweep {
5885
6054
  from {
@@ -6631,14 +6800,22 @@ hm-timeline-item,
6631
6800
  }
6632
6801
  }
6633
6802
  @media (prefers-reduced-motion: reduce) {
6634
- .hm-timeline__arc {
6803
+ :where(:root:not([data-motion])) .hm-timeline__arc {
6635
6804
  animation: none;
6636
6805
  }
6637
- .hm-timeline__mark--pulse::after {
6806
+ :where(:root:not([data-motion])) .hm-timeline__mark--pulse::after {
6638
6807
  content: none;
6639
6808
  animation: none;
6640
6809
  }
6641
6810
  }
6811
+ :where(:root[data-motion=reduce]) .hm-timeline__arc {
6812
+ animation: none;
6813
+ }
6814
+ :where(:root[data-motion=reduce]) .hm-timeline__mark--pulse::after {
6815
+ content: none;
6816
+ animation: none;
6817
+ }
6818
+
6642
6819
  @media (forced-colors: active) {
6643
6820
  .hm-timeline .hm-timeline__mark {
6644
6821
  border-color: CanvasText;
@@ -6932,10 +7109,13 @@ hm-dual-list {
6932
7109
  background: var(--hm-skeleton-base);
6933
7110
  }
6934
7111
  @media (prefers-reduced-motion: reduce) {
6935
- .hm-dual-list__option {
7112
+ :where(:root:not([data-motion])) .hm-dual-list__option {
6936
7113
  transition: none;
6937
7114
  }
6938
7115
  }
7116
+ :where(:root[data-motion=reduce]) .hm-dual-list__option {
7117
+ transition: none;
7118
+ }
6939
7119
  @media (forced-colors: active) {
6940
7120
  .hm-dual-list__pane {
6941
7121
  border-color: CanvasText;
@@ -7162,10 +7342,13 @@ hm-reorder-list {
7162
7342
  color: var(--hm-disabled-text);
7163
7343
  }
7164
7344
  @media (prefers-reduced-motion: reduce) {
7165
- .hm-reorder-list__item {
7345
+ :where(:root:not([data-motion])) .hm-reorder-list__item {
7166
7346
  transition: none;
7167
7347
  }
7168
7348
  }
7349
+ :where(:root[data-motion=reduce]) .hm-reorder-list__item {
7350
+ transition: none;
7351
+ }
7169
7352
  @media (forced-colors: active) {
7170
7353
  .hm-reorder-list__item {
7171
7354
  border-color: CanvasText;
@@ -7193,6 +7376,178 @@ hm-reorder-list {
7193
7376
  }
7194
7377
  }
7195
7378
 
7379
+ hm-list-editor {
7380
+ display: block;
7381
+ width: 100%;
7382
+ }
7383
+
7384
+ .hm-list-editor {
7385
+ container: hm-list-editor/inline-size;
7386
+ display: grid;
7387
+ grid-template-columns: minmax(0, 1fr);
7388
+ gap: var(--hm-space-xs);
7389
+ width: 100%;
7390
+ }
7391
+ .hm-list-editor__header {
7392
+ display: grid;
7393
+ gap: var(--hm-space-micro);
7394
+ }
7395
+ .hm-list-editor__label-row {
7396
+ display: flex;
7397
+ flex-wrap: wrap;
7398
+ align-items: baseline;
7399
+ gap: var(--hm-space-nano);
7400
+ }
7401
+ .hm-list-editor__label {
7402
+ color: var(--hm-text);
7403
+ font-size: var(--hm-font-size-sm);
7404
+ font-weight: var(--hm-font-weight-semibold);
7405
+ }
7406
+ .hm-list-editor__required, .hm-list-editor__count {
7407
+ color: var(--hm-muted);
7408
+ font-size: var(--hm-font-size-xs);
7409
+ }
7410
+ .hm-list-editor__count {
7411
+ margin-inline-start: auto;
7412
+ font-variant-numeric: tabular-nums;
7413
+ }
7414
+ .hm-list-editor__add {
7415
+ display: flex;
7416
+ flex-wrap: wrap;
7417
+ align-items: flex-start;
7418
+ gap: var(--hm-space-xs);
7419
+ }
7420
+ .hm-list-editor__fields {
7421
+ display: flex;
7422
+ flex: 1 1 12rem;
7423
+ flex-wrap: wrap;
7424
+ align-items: flex-start;
7425
+ gap: var(--hm-space-xs);
7426
+ min-width: 0;
7427
+ }
7428
+ .hm-list-editor__field {
7429
+ flex: 1 1 12rem;
7430
+ min-width: 0;
7431
+ }
7432
+ .hm-list-editor__actions {
7433
+ display: flex;
7434
+ flex-wrap: nowrap;
7435
+ align-items: center;
7436
+ gap: var(--hm-space-xs);
7437
+ }
7438
+ .hm-list-editor--pair .hm-list-editor__add, .hm-list-editor--pair .hm-list-editor__fields {
7439
+ display: grid;
7440
+ grid-template-columns: minmax(0, 1fr);
7441
+ gap: var(--hm-space-xs);
7442
+ }
7443
+ .hm-list-editor__row {
7444
+ display: flex;
7445
+ align-items: center;
7446
+ gap: var(--hm-space-xs);
7447
+ min-width: 0;
7448
+ }
7449
+ .hm-list-editor__text {
7450
+ display: flex;
7451
+ flex: 1;
7452
+ flex-direction: column;
7453
+ gap: var(--hm-space-nano);
7454
+ min-width: 0;
7455
+ padding-block: var(--hm-space-micro);
7456
+ }
7457
+ .hm-list-editor__title {
7458
+ color: var(--hm-text);
7459
+ font-size: var(--hm-font-size-sm);
7460
+ font-weight: var(--hm-font-weight-semibold);
7461
+ overflow-wrap: anywhere;
7462
+ }
7463
+ .hm-list-editor__description {
7464
+ color: var(--hm-muted);
7465
+ font-size: var(--hm-font-size-xs);
7466
+ overflow-wrap: anywhere;
7467
+ }
7468
+ .hm-list-editor .hm-reorder-list__item:has(.hm-list-editor__row--editing) {
7469
+ border-color: var(--hm-action);
7470
+ }
7471
+ .hm-list-editor__edit {
7472
+ flex-shrink: 0;
7473
+ }
7474
+ .hm-list-editor__static {
7475
+ display: flex;
7476
+ flex-direction: column;
7477
+ gap: var(--hm-space-micro);
7478
+ margin: 0;
7479
+ padding: 0;
7480
+ list-style: none;
7481
+ }
7482
+ .hm-list-editor__static-item {
7483
+ display: flex;
7484
+ flex-direction: column;
7485
+ gap: var(--hm-space-nano);
7486
+ border: var(--hm-border-hairline) solid var(--hm-divider);
7487
+ border-radius: var(--hm-radius-control);
7488
+ padding: var(--hm-space-xs) var(--hm-space-sm);
7489
+ background: var(--hm-surface-raised);
7490
+ }
7491
+ .hm-list-editor__empty, .hm-list-editor__hint {
7492
+ margin: 0;
7493
+ color: var(--hm-muted);
7494
+ font-size: var(--hm-font-size-sm);
7495
+ }
7496
+ .hm-list-editor__hint {
7497
+ font-size: var(--hm-font-size-xs);
7498
+ }
7499
+ .hm-list-editor__error {
7500
+ display: flex;
7501
+ align-items: center;
7502
+ gap: var(--hm-space-micro);
7503
+ margin: 0;
7504
+ color: var(--hm-danger);
7505
+ font-size: var(--hm-font-size-xs);
7506
+ }
7507
+ .hm-list-editor--invalid .hm-reorder-list__item {
7508
+ border-color: var(--hm-danger);
7509
+ }
7510
+ .hm-list-editor--disabled .hm-list-editor__title, .hm-list-editor--disabled .hm-list-editor__description {
7511
+ color: var(--hm-disabled-text);
7512
+ }
7513
+ @media (forced-colors: active) {
7514
+ .hm-list-editor .hm-reorder-list__item:has(.hm-list-editor__row--editing) {
7515
+ border: var(--hm-border-thin) solid Highlight;
7516
+ }
7517
+ .hm-list-editor__static-item {
7518
+ border-color: CanvasText;
7519
+ }
7520
+ }
7521
+
7522
+ @container hm-list-editor (min-width: 36rem) {
7523
+ .hm-list-editor--pair .hm-list-editor__add {
7524
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
7525
+ grid-template-rows: auto auto auto;
7526
+ gap: 0 var(--hm-space-xs);
7527
+ }
7528
+ .hm-list-editor--pair .hm-list-editor__fields {
7529
+ display: contents;
7530
+ }
7531
+ .hm-list-editor--pair .hm-list-editor__field {
7532
+ display: grid;
7533
+ grid-row: 1/span 3;
7534
+ grid-template-rows: subgrid;
7535
+ }
7536
+ .hm-list-editor--pair .hm-list-editor__field > .hm-field {
7537
+ display: contents;
7538
+ }
7539
+ .hm-list-editor--pair .hm-list-editor__field .hm-field__label-row {
7540
+ padding-block-end: var(--hm-space-micro);
7541
+ }
7542
+ .hm-list-editor--pair .hm-list-editor__field .hm-field__error {
7543
+ padding-block-start: var(--hm-space-micro);
7544
+ }
7545
+ .hm-list-editor--pair .hm-list-editor__actions {
7546
+ grid-row: 2;
7547
+ grid-column: 3;
7548
+ align-self: center;
7549
+ }
7550
+ }
7196
7551
  .hm-draggable {
7197
7552
  cursor: grab;
7198
7553
  touch-action: manipulation;
@@ -7285,11 +7640,16 @@ hm-reorder-list {
7285
7640
  }
7286
7641
 
7287
7642
  @media (prefers-reduced-motion: reduce) {
7288
- .hm-drag-placeholder,
7289
- .hm-drop-zone {
7643
+ :where(:root:not([data-motion])) .hm-drag-placeholder,
7644
+ :where(:root:not([data-motion])) .hm-drop-zone {
7290
7645
  transition: none;
7291
7646
  }
7292
7647
  }
7648
+ :where(:root[data-motion=reduce]) .hm-drag-placeholder,
7649
+ :where(:root[data-motion=reduce]) .hm-drop-zone {
7650
+ transition: none;
7651
+ }
7652
+
7293
7653
  @media (forced-colors: active) {
7294
7654
  .hm-draggable:focus-visible,
7295
7655
  .hm-drag-handle:focus-visible,
@@ -7524,12 +7884,18 @@ hm-kanban {
7524
7884
  }
7525
7885
 
7526
7886
  @media (prefers-reduced-motion: reduce) {
7527
- .hm-kanban-column,
7528
- .hm-kanban-column__chevron,
7529
- .hm-kanban-card {
7887
+ :where(:root:not([data-motion])) .hm-kanban-column,
7888
+ :where(:root:not([data-motion])) .hm-kanban-column__chevron,
7889
+ :where(:root:not([data-motion])) .hm-kanban-card {
7530
7890
  transition: none;
7531
7891
  }
7532
7892
  }
7893
+ :where(:root[data-motion=reduce]) .hm-kanban-column,
7894
+ :where(:root[data-motion=reduce]) .hm-kanban-column__chevron,
7895
+ :where(:root[data-motion=reduce]) .hm-kanban-card {
7896
+ transition: none;
7897
+ }
7898
+
7533
7899
  @media (forced-colors: active) {
7534
7900
  .hm-kanban-column {
7535
7901
  border-color: CanvasText;
@@ -8321,10 +8687,14 @@ hm-property-view {
8321
8687
  }
8322
8688
 
8323
8689
  @media (prefers-reduced-motion: reduce) {
8324
- .hm-property-view__chevron {
8690
+ :where(:root:not([data-motion])) .hm-property-view__chevron {
8325
8691
  transition: none;
8326
8692
  }
8327
8693
  }
8694
+ :where(:root[data-motion=reduce]) .hm-property-view__chevron {
8695
+ transition: none;
8696
+ }
8697
+
8328
8698
  @media (forced-colors: active) {
8329
8699
  .hm-property-view__group {
8330
8700
  border-color: CanvasText;
@@ -8409,11 +8779,15 @@ hm-card-container {
8409
8779
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
8410
8780
  }
8411
8781
  @media (prefers-reduced-motion: reduce) {
8412
- .hm-card-container__skeleton-title {
8782
+ :where(:root:not([data-motion])) .hm-card-container__skeleton-title {
8413
8783
  animation: none;
8414
8784
  background-position: 50% 0;
8415
8785
  }
8416
8786
  }
8787
+ :where(:root[data-motion=reduce]) .hm-card-container__skeleton-title {
8788
+ animation: none;
8789
+ background-position: 50% 0;
8790
+ }
8417
8791
  @media (forced-colors: active) {
8418
8792
  .hm-card-container__skeleton-title {
8419
8793
  forced-color-adjust: none;
@@ -8438,11 +8812,15 @@ hm-card-container {
8438
8812
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
8439
8813
  }
8440
8814
  @media (prefers-reduced-motion: reduce) {
8441
- .hm-card-container__skeleton-line {
8815
+ :where(:root:not([data-motion])) .hm-card-container__skeleton-line {
8442
8816
  animation: none;
8443
8817
  background-position: 50% 0;
8444
8818
  }
8445
8819
  }
8820
+ :where(:root[data-motion=reduce]) .hm-card-container__skeleton-line {
8821
+ animation: none;
8822
+ background-position: 50% 0;
8823
+ }
8446
8824
  @media (forced-colors: active) {
8447
8825
  .hm-card-container__skeleton-line {
8448
8826
  forced-color-adjust: none;
@@ -9013,11 +9391,15 @@ hm-stat-card,
9013
9391
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
9014
9392
  }
9015
9393
  @media (prefers-reduced-motion: reduce) {
9016
- .hm-stat-card__bone--value {
9394
+ :where(:root:not([data-motion])) .hm-stat-card__bone--value {
9017
9395
  animation: none;
9018
9396
  background-position: 50% 0;
9019
9397
  }
9020
9398
  }
9399
+ :where(:root[data-motion=reduce]) .hm-stat-card__bone--value {
9400
+ animation: none;
9401
+ background-position: 50% 0;
9402
+ }
9021
9403
  @media (forced-colors: active) {
9022
9404
  .hm-stat-card__bone--value {
9023
9405
  forced-color-adjust: none;
@@ -9042,11 +9424,15 @@ hm-stat-card,
9042
9424
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
9043
9425
  }
9044
9426
  @media (prefers-reduced-motion: reduce) {
9045
- .hm-stat-card__bone--line {
9427
+ :where(:root:not([data-motion])) .hm-stat-card__bone--line {
9046
9428
  animation: none;
9047
9429
  background-position: 50% 0;
9048
9430
  }
9049
9431
  }
9432
+ :where(:root[data-motion=reduce]) .hm-stat-card__bone--line {
9433
+ animation: none;
9434
+ background-position: 50% 0;
9435
+ }
9050
9436
  @media (forced-colors: active) {
9051
9437
  .hm-stat-card__bone--line {
9052
9438
  forced-color-adjust: none;
@@ -9209,11 +9595,15 @@ hm-stat-group,
9209
9595
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
9210
9596
  }
9211
9597
  @media (prefers-reduced-motion: reduce) {
9212
- .hm-stat-group__bone {
9598
+ :where(:root:not([data-motion])) .hm-stat-group__bone {
9213
9599
  animation: none;
9214
9600
  background-position: 50% 0;
9215
9601
  }
9216
9602
  }
9603
+ :where(:root[data-motion=reduce]) .hm-stat-group__bone {
9604
+ animation: none;
9605
+ background-position: 50% 0;
9606
+ }
9217
9607
  @media (forced-colors: active) {
9218
9608
  .hm-stat-group__bone {
9219
9609
  forced-color-adjust: none;
@@ -9411,10 +9801,14 @@ hm-drawer, .hm-drawer-host {
9411
9801
  }
9412
9802
 
9413
9803
  @media (prefers-reduced-motion: reduce) {
9414
- .hm-drawer__window {
9804
+ :where(:root:not([data-motion])) .hm-drawer__window {
9415
9805
  transition: none;
9416
9806
  }
9417
9807
  }
9808
+ :where(:root[data-motion=reduce]) .hm-drawer__window {
9809
+ transition: none;
9810
+ }
9811
+
9418
9812
  /* Alto contraste: sem sombra, a borda do lado livre marca onde o painel termina (no fixado, separa o
9419
9813
  painel do conteúdo). */
9420
9814
  @media (forced-colors: active) {
@@ -9957,12 +10351,18 @@ hm-carousel {
9957
10351
  }
9958
10352
 
9959
10353
  @media (prefers-reduced-motion: reduce) {
9960
- .hm-carousel__track,
9961
- .hm-carousel__dot,
9962
- .hm-carousel__dot::before {
10354
+ :where(:root:not([data-motion])) .hm-carousel__track,
10355
+ :where(:root:not([data-motion])) .hm-carousel__dot,
10356
+ :where(:root:not([data-motion])) .hm-carousel__dot::before {
9963
10357
  transition: none;
9964
10358
  }
9965
10359
  }
10360
+ :where(:root[data-motion=reduce]) .hm-carousel__track,
10361
+ :where(:root[data-motion=reduce]) .hm-carousel__dot,
10362
+ :where(:root[data-motion=reduce]) .hm-carousel__dot::before {
10363
+ transition: none;
10364
+ }
10365
+
9966
10366
  @media (forced-colors: active) {
9967
10367
  .hm-carousel__dot::before {
9968
10368
  forced-color-adjust: none;
@@ -10134,11 +10534,16 @@ hm-paginator {
10134
10534
  }
10135
10535
  }
10136
10536
  @media (prefers-reduced-motion: reduce) {
10137
- .hm-paginator__page,
10138
- .hm-paginator__select-input {
10537
+ :where(:root:not([data-motion])) .hm-paginator__page,
10538
+ :where(:root:not([data-motion])) .hm-paginator__select-input {
10139
10539
  transition: none;
10140
10540
  }
10141
10541
  }
10542
+ :where(:root[data-motion=reduce]) .hm-paginator__page,
10543
+ :where(:root[data-motion=reduce]) .hm-paginator__select-input {
10544
+ transition: none;
10545
+ }
10546
+
10142
10547
  @media (forced-colors: active) {
10143
10548
  .hm-paginator__select-input {
10144
10549
  border-color: CanvasText;
@@ -11501,10 +11906,13 @@ hm-data-grid {
11501
11906
  }
11502
11907
  }
11503
11908
  @media (prefers-reduced-motion: reduce) {
11504
- .hm-data-grid-column-filter {
11909
+ :where(:root:not([data-motion])) .hm-data-grid-column-filter {
11505
11910
  transition: none;
11506
11911
  }
11507
11912
  }
11913
+ :where(:root[data-motion=reduce]) .hm-data-grid-column-filter {
11914
+ transition: none;
11915
+ }
11508
11916
  .hm-data-grid-column-filter:focus {
11509
11917
  outline: none;
11510
11918
  }
@@ -12086,11 +12494,15 @@ hm-workspace-node {
12086
12494
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
12087
12495
  }
12088
12496
  @media (prefers-reduced-motion: reduce) {
12089
- .hm-combobox__skeleton-label {
12497
+ :where(:root:not([data-motion])) .hm-combobox__skeleton-label {
12090
12498
  animation: none;
12091
12499
  background-position: 50% 0;
12092
12500
  }
12093
12501
  }
12502
+ :where(:root[data-motion=reduce]) .hm-combobox__skeleton-label {
12503
+ animation: none;
12504
+ background-position: 50% 0;
12505
+ }
12094
12506
  @media (forced-colors: active) {
12095
12507
  .hm-combobox__skeleton-label {
12096
12508
  forced-color-adjust: none;
@@ -12116,11 +12528,15 @@ hm-workspace-node {
12116
12528
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
12117
12529
  }
12118
12530
  @media (prefers-reduced-motion: reduce) {
12119
- .hm-combobox__skeleton-frame {
12531
+ :where(:root:not([data-motion])) .hm-combobox__skeleton-frame {
12120
12532
  animation: none;
12121
12533
  background-position: 50% 0;
12122
12534
  }
12123
12535
  }
12536
+ :where(:root[data-motion=reduce]) .hm-combobox__skeleton-frame {
12537
+ animation: none;
12538
+ background-position: 50% 0;
12539
+ }
12124
12540
  @media (forced-colors: active) {
12125
12541
  .hm-combobox__skeleton-frame {
12126
12542
  forced-color-adjust: none;
@@ -12155,10 +12571,13 @@ hm-workspace-node {
12155
12571
  translate: -50% 0;
12156
12572
  }
12157
12573
  @media (prefers-reduced-motion: reduce) {
12158
- .hm-combobox__popover {
12574
+ :where(:root:not([data-motion])) .hm-combobox__popover {
12159
12575
  animation-name: hm-combobox-fade;
12160
12576
  }
12161
12577
  }
12578
+ :where(:root[data-motion=reduce]) .hm-combobox__popover {
12579
+ animation-name: hm-combobox-fade;
12580
+ }
12162
12581
  .hm-combobox__list {
12163
12582
  position: relative;
12164
12583
  margin: 0;
@@ -12444,10 +12863,13 @@ hm-workspace-node {
12444
12863
  translate: -50% 0;
12445
12864
  }
12446
12865
  @media (prefers-reduced-motion: reduce) {
12447
- .hm-combobox-multi__popover {
12866
+ :where(:root:not([data-motion])) .hm-combobox-multi__popover {
12448
12867
  animation-name: hm-combobox-fade;
12449
12868
  }
12450
12869
  }
12870
+ :where(:root[data-motion=reduce]) .hm-combobox-multi__popover {
12871
+ animation-name: hm-combobox-fade;
12872
+ }
12451
12873
  .hm-combobox-multi__search {
12452
12874
  display: flex;
12453
12875
  align-items: center;
@@ -13265,12 +13687,18 @@ hm-tab {
13265
13687
  }
13266
13688
 
13267
13689
  @media (prefers-reduced-motion: reduce) {
13268
- .hm-tabs__tab,
13269
- .hm-tabs__tab::after,
13270
- .hm-tabs__more {
13690
+ :where(:root:not([data-motion])) .hm-tabs__tab,
13691
+ :where(:root:not([data-motion])) .hm-tabs__tab::after,
13692
+ :where(:root:not([data-motion])) .hm-tabs__more {
13271
13693
  transition: none;
13272
13694
  }
13273
13695
  }
13696
+ :where(:root[data-motion=reduce]) .hm-tabs__tab,
13697
+ :where(:root[data-motion=reduce]) .hm-tabs__tab::after,
13698
+ :where(:root[data-motion=reduce]) .hm-tabs__more {
13699
+ transition: none;
13700
+ }
13701
+
13274
13702
  @media (forced-colors: active) {
13275
13703
  .hm-tabs__tab::after {
13276
13704
  forced-color-adjust: none;
@@ -13471,11 +13899,15 @@ hm-tab {
13471
13899
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
13472
13900
  }
13473
13901
  @media (prefers-reduced-motion: reduce) {
13474
- .hm-textarea__ghost {
13902
+ :where(:root:not([data-motion])) .hm-textarea__ghost {
13475
13903
  animation: none;
13476
13904
  background-position: 50% 0;
13477
13905
  }
13478
13906
  }
13907
+ :where(:root[data-motion=reduce]) .hm-textarea__ghost {
13908
+ animation: none;
13909
+ background-position: 50% 0;
13910
+ }
13479
13911
  @media (forced-colors: active) {
13480
13912
  .hm-textarea__ghost {
13481
13913
  forced-color-adjust: none;
@@ -13491,11 +13923,16 @@ hm-tab {
13491
13923
  }
13492
13924
 
13493
13925
  @media (prefers-reduced-motion: reduce) {
13494
- .hm-textarea__control,
13495
- .hm-textarea__frame--grouped {
13926
+ :where(:root:not([data-motion])) .hm-textarea__control,
13927
+ :where(:root:not([data-motion])) .hm-textarea__frame--grouped {
13496
13928
  transition-duration: 1ms;
13497
13929
  }
13498
13930
  }
13931
+ :where(:root[data-motion=reduce]) .hm-textarea__control,
13932
+ :where(:root[data-motion=reduce]) .hm-textarea__frame--grouped {
13933
+ transition-duration: 1ms;
13934
+ }
13935
+
13499
13936
  @media (forced-colors: active) {
13500
13937
  .hm-textarea__control {
13501
13938
  border-color: CanvasText;
@@ -13721,11 +14158,15 @@ hm-tab {
13721
14158
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
13722
14159
  }
13723
14160
  @media (prefers-reduced-motion: reduce) {
13724
- .hm-rich-text__ghost {
14161
+ :where(:root:not([data-motion])) .hm-rich-text__ghost {
13725
14162
  animation: none;
13726
14163
  background-position: 50% 0;
13727
14164
  }
13728
14165
  }
14166
+ :where(:root[data-motion=reduce]) .hm-rich-text__ghost {
14167
+ animation: none;
14168
+ background-position: 50% 0;
14169
+ }
13729
14170
  @media (forced-colors: active) {
13730
14171
  .hm-rich-text__ghost {
13731
14172
  forced-color-adjust: none;
@@ -13741,10 +14182,14 @@ hm-tab {
13741
14182
  }
13742
14183
 
13743
14184
  @media (prefers-reduced-motion: reduce) {
13744
- .hm-rich-text__frame {
14185
+ :where(:root:not([data-motion])) .hm-rich-text__frame {
13745
14186
  transition-duration: 1ms;
13746
14187
  }
13747
14188
  }
14189
+ :where(:root[data-motion=reduce]) .hm-rich-text__frame {
14190
+ transition-duration: 1ms;
14191
+ }
14192
+
13748
14193
  @media (forced-colors: active) {
13749
14194
  .hm-rich-text__frame {
13750
14195
  border-color: CanvasText;
@@ -14178,11 +14623,16 @@ hm-radio {
14178
14623
  }
14179
14624
 
14180
14625
  @media (prefers-reduced-motion: reduce) {
14181
- .hm-radio__control,
14182
- .hm-radio--card .hm-radio__row {
14626
+ :where(:root:not([data-motion])) .hm-radio__control,
14627
+ :where(:root:not([data-motion])) .hm-radio--card .hm-radio__row {
14183
14628
  transition-duration: 1ms;
14184
14629
  }
14185
14630
  }
14631
+ :where(:root[data-motion=reduce]) .hm-radio__control,
14632
+ :where(:root[data-motion=reduce]) .hm-radio--card .hm-radio__row {
14633
+ transition-duration: 1ms;
14634
+ }
14635
+
14186
14636
  @media (forced-colors: active) {
14187
14637
  .hm-radio__control {
14188
14638
  forced-color-adjust: none;
@@ -14406,11 +14856,15 @@ hm-switch {
14406
14856
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
14407
14857
  }
14408
14858
  @media (prefers-reduced-motion: reduce) {
14409
- .hm-switch__ghost-track {
14859
+ :where(:root:not([data-motion])) .hm-switch__ghost-track {
14410
14860
  animation: none;
14411
14861
  background-position: 50% 0;
14412
14862
  }
14413
14863
  }
14864
+ :where(:root[data-motion=reduce]) .hm-switch__ghost-track {
14865
+ animation: none;
14866
+ background-position: 50% 0;
14867
+ }
14414
14868
  @media (forced-colors: active) {
14415
14869
  .hm-switch__ghost-track {
14416
14870
  forced-color-adjust: none;
@@ -14437,11 +14891,15 @@ hm-switch {
14437
14891
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
14438
14892
  }
14439
14893
  @media (prefers-reduced-motion: reduce) {
14440
- .hm-switch__ghost-label {
14894
+ :where(:root:not([data-motion])) .hm-switch__ghost-label {
14441
14895
  animation: none;
14442
14896
  background-position: 50% 0;
14443
14897
  }
14444
14898
  }
14899
+ :where(:root[data-motion=reduce]) .hm-switch__ghost-label {
14900
+ animation: none;
14901
+ background-position: 50% 0;
14902
+ }
14445
14903
  @media (forced-colors: active) {
14446
14904
  .hm-switch__ghost-label {
14447
14905
  forced-color-adjust: none;
@@ -14459,11 +14917,16 @@ hm-switch {
14459
14917
  }
14460
14918
 
14461
14919
  @media (prefers-reduced-motion: reduce) {
14462
- .hm-switch__thumb,
14463
- .hm-switch__track {
14920
+ :where(:root:not([data-motion])) .hm-switch__thumb,
14921
+ :where(:root:not([data-motion])) .hm-switch__track {
14464
14922
  transition-duration: 1ms;
14465
14923
  }
14466
14924
  }
14925
+ :where(:root[data-motion=reduce]) .hm-switch__thumb,
14926
+ :where(:root[data-motion=reduce]) .hm-switch__track {
14927
+ transition-duration: 1ms;
14928
+ }
14929
+
14467
14930
  @media (forced-colors: active) {
14468
14931
  .hm-switch__track {
14469
14932
  forced-color-adjust: none;
@@ -14608,10 +15071,14 @@ hm-switch {
14608
15071
  }
14609
15072
 
14610
15073
  @media (prefers-reduced-motion: reduce) {
14611
- .hm-segmented__option {
15074
+ :where(:root:not([data-motion])) .hm-segmented__option {
14612
15075
  transition: none;
14613
15076
  }
14614
15077
  }
15078
+ :where(:root[data-motion=reduce]) .hm-segmented__option {
15079
+ transition: none;
15080
+ }
15081
+
14615
15082
  /* Alto contraste: a opção marcada se distinguia por superfície elevada + sombra (ou cor de ação no
14616
15083
  `--action`), e as não marcadas têm borda transparente — que o navegador torna visível, deixando
14617
15084
  todas iguais. Marcada → Highlight/HighlightText; desabilitada → GrayText; foco → Highlight. */
@@ -14849,9 +15316,11 @@ hm-settings-dialog {
14849
15316
  @media (max-width: 767px) {
14850
15317
  .hm-settings {
14851
15318
  padding: 0;
15319
+ /* minmax(0, 1fr): sem isso a faixa de navegação (uma linha só, larga) alarga a coluna além da tela e o
15320
+ conteúdo sai cortado pela direita. */
14852
15321
  }
14853
15322
  .hm-settings__window {
14854
- grid-template-columns: 1fr;
15323
+ grid-template-columns: minmax(0, 1fr);
14855
15324
  grid-template-rows: auto minmax(0, 1fr);
14856
15325
  max-width: none;
14857
15326
  height: 100%;
@@ -14902,6 +15371,12 @@ hm-settings-dialog {
14902
15371
  }
14903
15372
  .hm-settings-section__header {
14904
15373
  padding-bottom: var(--hm-space-xxxs);
15374
+ /* Tela estreita: o X de fechar fica por cima do topo do conteúdo; o título não passa por baixo dele. */
15375
+ }
15376
+ @media (max-width: 767px) {
15377
+ .hm-settings-section__header {
15378
+ padding-inline-end: calc(var(--hm-control-height) + var(--hm-space-xxxs));
15379
+ }
14905
15380
  }
14906
15381
  .hm-settings-section__heading {
14907
15382
  margin: 0;
@@ -14930,6 +15405,7 @@ hm-settings-dialog {
14930
15405
  .hm-settings-row--stacked {
14931
15406
  flex-direction: column;
14932
15407
  align-items: stretch;
15408
+ gap: var(--hm-space-xs);
14933
15409
  }
14934
15410
  .hm-settings-row__text {
14935
15411
  display: flex;
@@ -14938,6 +15414,18 @@ hm-settings-dialog {
14938
15414
  flex-direction: column;
14939
15415
  gap: var(--hm-space-micro);
14940
15416
  }
15417
+ .hm-settings-row {
15418
+ /* Rótulo + ajuda opcional (`rowHelp`, em geral um hm-toggletip) na mesma linha. */
15419
+ }
15420
+ .hm-settings-row__label-line {
15421
+ display: flex;
15422
+ align-items: center;
15423
+ gap: var(--hm-space-nano);
15424
+ /* O botão do toggletip é mais alto que a linha de texto: não deixa ele empurrar a linha. */
15425
+ }
15426
+ .hm-settings-row__label-line .hm-toggletip {
15427
+ margin-block: calc(-1 * var(--hm-space-xxxs));
15428
+ }
14941
15429
  .hm-settings-row__label {
14942
15430
  color: var(--hm-text);
14943
15431
  font-size: var(--hm-font-size-sm);
@@ -15102,12 +15590,18 @@ hm-accordion-panel,
15102
15590
  }
15103
15591
 
15104
15592
  @media (prefers-reduced-motion: reduce) {
15105
- .hm-accordion-panel__trigger,
15106
- .hm-accordion-panel__chevron,
15107
- .hm-accordion-panel__body {
15593
+ :where(:root:not([data-motion])) .hm-accordion-panel__trigger,
15594
+ :where(:root:not([data-motion])) .hm-accordion-panel__chevron,
15595
+ :where(:root:not([data-motion])) .hm-accordion-panel__body {
15108
15596
  transition: none;
15109
15597
  }
15110
15598
  }
15599
+ :where(:root[data-motion=reduce]) .hm-accordion-panel__trigger,
15600
+ :where(:root[data-motion=reduce]) .hm-accordion-panel__chevron,
15601
+ :where(:root[data-motion=reduce]) .hm-accordion-panel__body {
15602
+ transition: none;
15603
+ }
15604
+
15111
15605
  @media (forced-colors: active) {
15112
15606
  .hm-accordion-panel__trigger:focus-visible {
15113
15607
  outline-color: Highlight;
@@ -15265,11 +15759,16 @@ hm-accordion-panel,
15265
15759
  }
15266
15760
 
15267
15761
  @media (prefers-reduced-motion: reduce) {
15268
- .hm-tree__item,
15269
- .hm-tree__chevron {
15762
+ :where(:root:not([data-motion])) .hm-tree__item,
15763
+ :where(:root:not([data-motion])) .hm-tree__chevron {
15270
15764
  transition: none;
15271
15765
  }
15272
15766
  }
15767
+ :where(:root[data-motion=reduce]) .hm-tree__item,
15768
+ :where(:root[data-motion=reduce]) .hm-tree__chevron {
15769
+ transition: none;
15770
+ }
15771
+
15273
15772
  @media (forced-colors: active) {
15274
15773
  .hm-tree__item--active {
15275
15774
  background: Highlight;
@@ -16351,6 +16850,8 @@ hm-event-calendar {
16351
16850
  display: inline-flex;
16352
16851
  align-items: stretch;
16353
16852
  vertical-align: middle;
16853
+ /* Os z-index dos botões (abaixo) valem só dentro do grupo, sem passar por cima de cabeçalho fixo etc. */
16854
+ isolation: isolate;
16354
16855
  }
16355
16856
  .hm-btn-group > hm-button,
16356
16857
  .hm-btn-group > .hm-button-host {
@@ -16371,11 +16872,15 @@ hm-event-calendar {
16371
16872
  margin-inline-start: calc(var(--hm-border-hairline) * -1);
16372
16873
  }
16373
16874
  .hm-btn-group {
16374
- /* O botão focado/ativo fica por cima dos vizinhos (a borda dele não some sob a do lado). */
16875
+ /* Na borda compartilhada vale a do habilitado (a do desabilitado é cinza); o focado/ativo fica por cima de
16876
+ todos (a borda dele não some sob a do lado). */
16877
+ }
16878
+ .hm-btn-group .hm-btn:not(:disabled, [aria-disabled=true]) {
16879
+ z-index: 1;
16375
16880
  }
16376
16881
  .hm-btn-group .hm-btn:hover,
16377
16882
  .hm-btn-group .hm-btn:focus-visible {
16378
- z-index: 1;
16883
+ z-index: 2;
16379
16884
  }
16380
16885
  .hm-btn-group {
16381
16886
  /* Pontas: o primeiro e o último VISÍVEIS (os `inMenu` ficam com display:none). */
@@ -18144,10 +18649,13 @@ hm-slider {
18144
18649
  translate: 0 -50%;
18145
18650
  }
18146
18651
  @media (prefers-reduced-motion: reduce) {
18147
- .hm-slider__thumb, .hm-slider__tooltip {
18652
+ :where(:root:not([data-motion])) .hm-slider__thumb, :where(:root:not([data-motion])) .hm-slider__tooltip {
18148
18653
  transition: none;
18149
18654
  }
18150
18655
  }
18656
+ :where(:root[data-motion=reduce]) .hm-slider__thumb, :where(:root[data-motion=reduce]) .hm-slider__tooltip {
18657
+ transition: none;
18658
+ }
18151
18659
 
18152
18660
  @media (forced-colors: active) {
18153
18661
  .hm-slider__rail {
@@ -18236,10 +18744,14 @@ hm-slider {
18236
18744
  }
18237
18745
 
18238
18746
  @media (prefers-reduced-motion: reduce) {
18239
- .hm-time-picker__list {
18747
+ :where(:root:not([data-motion])) .hm-time-picker__list {
18240
18748
  transition: none;
18241
18749
  }
18242
18750
  }
18751
+ :where(:root[data-motion=reduce]) .hm-time-picker__list {
18752
+ transition: none;
18753
+ }
18754
+
18243
18755
  /* Alto contraste: o cartão ganha borda, a ativa contorno Highlight e a escolhida o par do sistema. */
18244
18756
  @media (forced-colors: active) {
18245
18757
  .hm-time-picker__list {
@@ -18492,16 +19004,26 @@ hm-slider {
18492
19004
  }
18493
19005
  }
18494
19006
  @media (prefers-reduced-motion: reduce) {
18495
- .hm-fab,
18496
- .hm-fab__button,
18497
- .hm-fab__icon,
18498
- .hm-fab__action-icon {
19007
+ :where(:root:not([data-motion])) .hm-fab,
19008
+ :where(:root:not([data-motion])) .hm-fab__button,
19009
+ :where(:root:not([data-motion])) .hm-fab__icon,
19010
+ :where(:root:not([data-motion])) .hm-fab__action-icon {
18499
19011
  transition: none;
18500
19012
  }
18501
- .hm-fab__menu {
19013
+ :where(:root:not([data-motion])) .hm-fab__menu {
18502
19014
  animation: none;
18503
19015
  }
18504
19016
  }
19017
+ :where(:root[data-motion=reduce]) .hm-fab,
19018
+ :where(:root[data-motion=reduce]) .hm-fab__button,
19019
+ :where(:root[data-motion=reduce]) .hm-fab__icon,
19020
+ :where(:root[data-motion=reduce]) .hm-fab__action-icon {
19021
+ transition: none;
19022
+ }
19023
+ :where(:root[data-motion=reduce]) .hm-fab__menu {
19024
+ animation: none;
19025
+ }
19026
+
18505
19027
  @media (forced-colors: active) {
18506
19028
  .hm-fab__button,
18507
19029
  .hm-fab__action-icon,
@@ -18637,11 +19159,15 @@ hm-search-field {
18637
19159
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
18638
19160
  }
18639
19161
  @media (prefers-reduced-motion: reduce) {
18640
- .hm-search-field__skeleton-label {
19162
+ :where(:root:not([data-motion])) .hm-search-field__skeleton-label {
18641
19163
  animation: none;
18642
19164
  background-position: 50% 0;
18643
19165
  }
18644
19166
  }
19167
+ :where(:root[data-motion=reduce]) .hm-search-field__skeleton-label {
19168
+ animation: none;
19169
+ background-position: 50% 0;
19170
+ }
18645
19171
  @media (forced-colors: active) {
18646
19172
  .hm-search-field__skeleton-label {
18647
19173
  forced-color-adjust: none;
@@ -18667,11 +19193,15 @@ hm-search-field {
18667
19193
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
18668
19194
  }
18669
19195
  @media (prefers-reduced-motion: reduce) {
18670
- .hm-search-field__skeleton-control {
19196
+ :where(:root:not([data-motion])) .hm-search-field__skeleton-control {
18671
19197
  animation: none;
18672
19198
  background-position: 50% 0;
18673
19199
  }
18674
19200
  }
19201
+ :where(:root[data-motion=reduce]) .hm-search-field__skeleton-control {
19202
+ animation: none;
19203
+ background-position: 50% 0;
19204
+ }
18675
19205
  @media (forced-colors: active) {
18676
19206
  .hm-search-field__skeleton-control {
18677
19207
  forced-color-adjust: none;
@@ -18706,16 +19236,25 @@ hm-search-field {
18706
19236
  }
18707
19237
 
18708
19238
  @media (prefers-reduced-motion: no-preference) {
18709
- .hm-reveal--pending:not(:focus-within) {
19239
+ :where(:root:not([data-motion])) .hm-reveal--pending:not(:focus-within) {
18710
19240
  opacity: 0;
18711
19241
  translate: 0 var(--hm-space-md);
18712
19242
  }
18713
19243
  }
19244
+ :where(:root[data-motion=full]) .hm-reveal--pending:not(:focus-within) {
19245
+ opacity: 0;
19246
+ translate: 0 var(--hm-space-md);
19247
+ }
19248
+
18714
19249
  @media (prefers-reduced-motion: reduce) {
18715
- .hm-reveal {
19250
+ :where(:root:not([data-motion])) .hm-reveal {
18716
19251
  transition: none;
18717
19252
  }
18718
19253
  }
19254
+ :where(:root[data-motion=reduce]) .hm-reveal {
19255
+ transition: none;
19256
+ }
19257
+
18719
19258
  @media print {
18720
19259
  .hm-reveal--pending,
18721
19260
  .hm-reveal--pending:not(:focus-within) {
@@ -19144,11 +19683,15 @@ hm-page-header {
19144
19683
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
19145
19684
  }
19146
19685
  @media (prefers-reduced-motion: reduce) {
19147
- .hm-page-header__summary--loading::before {
19686
+ :where(:root:not([data-motion])) .hm-page-header__summary--loading::before {
19148
19687
  animation: none;
19149
19688
  background-position: 50% 0;
19150
19689
  }
19151
19690
  }
19691
+ :where(:root[data-motion=reduce]) .hm-page-header__summary--loading::before {
19692
+ animation: none;
19693
+ background-position: 50% 0;
19694
+ }
19152
19695
  @media (forced-colors: active) {
19153
19696
  .hm-page-header__summary--loading::before {
19154
19697
  forced-color-adjust: none;
@@ -19183,11 +19726,15 @@ hm-page-header {
19183
19726
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
19184
19727
  }
19185
19728
  @media (prefers-reduced-motion: reduce) {
19186
- .hm-page-header__skeleton-title {
19729
+ :where(:root:not([data-motion])) .hm-page-header__skeleton-title {
19187
19730
  animation: none;
19188
19731
  background-position: 50% 0;
19189
19732
  }
19190
19733
  }
19734
+ :where(:root[data-motion=reduce]) .hm-page-header__skeleton-title {
19735
+ animation: none;
19736
+ background-position: 50% 0;
19737
+ }
19191
19738
  @media (forced-colors: active) {
19192
19739
  .hm-page-header__skeleton-title {
19193
19740
  forced-color-adjust: none;
@@ -19760,11 +20307,15 @@ hm-file-upload {
19760
20307
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
19761
20308
  }
19762
20309
  @media (prefers-reduced-motion: reduce) {
19763
- .hm-file-upload__skeleton-label {
20310
+ :where(:root:not([data-motion])) .hm-file-upload__skeleton-label {
19764
20311
  animation: none;
19765
20312
  background-position: 50% 0;
19766
20313
  }
19767
20314
  }
20315
+ :where(:root[data-motion=reduce]) .hm-file-upload__skeleton-label {
20316
+ animation: none;
20317
+ background-position: 50% 0;
20318
+ }
19768
20319
  @media (forced-colors: active) {
19769
20320
  .hm-file-upload__skeleton-label {
19770
20321
  forced-color-adjust: none;
@@ -19790,11 +20341,15 @@ hm-file-upload {
19790
20341
  animation: hm-skeleton-sweep calc(var(--hm-duration-slow) * 3) linear infinite;
19791
20342
  }
19792
20343
  @media (prefers-reduced-motion: reduce) {
19793
- .hm-file-upload__skeleton-zone {
20344
+ :where(:root:not([data-motion])) .hm-file-upload__skeleton-zone {
19794
20345
  animation: none;
19795
20346
  background-position: 50% 0;
19796
20347
  }
19797
20348
  }
20349
+ :where(:root[data-motion=reduce]) .hm-file-upload__skeleton-zone {
20350
+ animation: none;
20351
+ background-position: 50% 0;
20352
+ }
19798
20353
  @media (forced-colors: active) {
19799
20354
  .hm-file-upload__skeleton-zone {
19800
20355
  forced-color-adjust: none;
@@ -19815,10 +20370,14 @@ hm-file-upload {
19815
20370
  }
19816
20371
 
19817
20372
  @media (prefers-reduced-motion: reduce) {
19818
- .hm-file-upload__zone {
20373
+ :where(:root:not([data-motion])) .hm-file-upload__zone {
19819
20374
  transition: none;
19820
20375
  }
19821
20376
  }
20377
+ :where(:root[data-motion=reduce]) .hm-file-upload__zone {
20378
+ transition: none;
20379
+ }
20380
+
19822
20381
  @media (forced-colors: active) {
19823
20382
  .hm-file-upload__zone {
19824
20383
  border-color: ButtonBorder;
@@ -20283,10 +20842,14 @@ hm-image-crop {
20283
20842
  }
20284
20843
  }
20285
20844
  @media (prefers-reduced-motion: reduce) {
20286
- .hm-image-crop__guides {
20845
+ :where(:root:not([data-motion])) .hm-image-crop__guides {
20287
20846
  transition: none;
20288
20847
  }
20289
20848
  }
20849
+ :where(:root[data-motion=reduce]) .hm-image-crop__guides {
20850
+ transition: none;
20851
+ }
20852
+
20290
20853
  @media (forced-colors: active) {
20291
20854
  .hm-image-crop__frame {
20292
20855
  border-color: Highlight;
@@ -20849,10 +21412,14 @@ hm-code-diff {
20849
21412
  }
20850
21413
 
20851
21414
  @media (prefers-reduced-motion: reduce) {
20852
- .hm-code-viewer__copy--floating {
21415
+ :where(:root:not([data-motion])) .hm-code-viewer__copy--floating {
20853
21416
  transition: none;
20854
21417
  }
20855
21418
  }
21419
+ :where(:root[data-motion=reduce]) .hm-code-viewer__copy--floating {
21420
+ transition: none;
21421
+ }
21422
+
20856
21423
  @media (forced-colors: active) {
20857
21424
  .hm-code-viewer__line--highlighted .hm-code-viewer__number {
20858
21425
  border-inline-start-color: CanvasText;