@wavemaker/foundation-css 12.0.0-next.45232 → 12.0.0-next.45239

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 (3) hide show
  1. foundation-css/foundation/foundation.css +1106 -1213
  2. foundation-css/foundation/foundation.min.css +1 -1
  3. foundation-css/package.json +1 -1
foundation-css/foundation/foundation.css CHANGED
@@ -404,32 +404,7 @@
404
404
  --wm-opacity-focus: 12%;
405
405
  --wm-opacity-active: 16%;
406
406
  }
407
- /*=========
408
- css variables doesn't support by less functions to generate lighten, darken, fade, etc.
409
- We are using color-mix function of css variables.
410
- ex: color-mix(in srgb, color1 50%, color2 30%)
411
- // Note: As less doesn't support css funsctions all the css funcions should be with less excepetion to support.
412
- // ex: ~"calc(100vh - 50px)" instead of calc(100vh - 50px) //
413
- // ex: ~"color-mix(in srgb, color1 50%, color2 30%)" instead of color-mix(in srgb, color1 50%, color2 30%) //
414
- =========*/
415
407
  :root {
416
- /*--shadows(elevations)--*/
417
- --wm-shadow-1: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
418
- --wm-shadow-2: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
419
- --wm-shadow-3: 0px 4px 8px 3px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
420
- --wm-shadow-4: 0px 6px 10px 4px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
421
- --wm-shadow-5: 0px 8px 12px 6px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
422
- --wm-shadow-addon-1: 0px 1px 3px 1px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
423
- --wm-shadow-addon-2: 0px 2px 6px 2px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
424
- --wm-shadow-addon-3: 0px 1px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
425
- --wm-shadow-addon-4: 0px 2px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
426
- --wm-shadow-addon-5: 0px 4px 4px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
427
- --wm-elevation-shadow-none: none;
428
- --wm-elevation-shadow-1: var(--wm-shadow-1),var(--wm-shadow-addon-1);
429
- --wm-elevation-shadow-2: var(--wm-shadow-2),var(--wm-shadow-addon-2);
430
- --wm-elevation-shadow-3: var(--wm-shadow-3),var(--wm-shadow-addon-3);
431
- --wm-elevation-shadow-4: var(--wm-shadow-4),var(--wm-shadow-addon-4);
432
- --wm-elevation-shadow-5: var(--wm-shadow-5),var(--wm-shadow-addon-5);
433
408
  /**--Components--**/
434
409
  --wm-accordion-group-gap: var(--wm-space-2);
435
410
  /*--Anchor--*/
@@ -451,38 +426,17 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
451
426
  --wm-anchor-icon-size: var(--wm-icon-size);
452
427
  --wm-anchor-image-size: var(--wm-icon-size);
453
428
  --wm-anchor-image-radius: var(--wm-radius-circle);
454
- --wm-badge-color: var(--wm-color-on-surface);
455
- --wm-badge-background: var(--wm-color-surface-variant);
429
+ --wm-badge-background: var(--wm-color-error);
430
+ --wm-badge-color: var(--wm-color-on-error);
456
431
  --wm-badge-min-height: 20px;
457
432
  --wm-badge-inline-padding: calc(var(--wm-space-2) * 0.75);
458
433
  --wm-badge-block-padding: var(--wm-space-1);
459
434
  --wm-badge-radius: var(--wm-radius-lg);
435
+ --wm-badge-font-family: var(--wm-body-small-font-family);
460
436
  --wm-badge-font-size: var(--wm-body-small-font-size);
461
437
  --wm-badge-font-weight: var(--wm-font-weight-bold);
462
- --wm-badge-font-family: var(--wm-body-small-font-family);
463
438
  --wm-badge-line-height: 1;
464
- --wm-badge-primary: var(--wm-color-primary);
465
- --wm-badge-primary-background: var(--wm-color-primary-container);
466
- --wm-badge-info: var(--wm-color-info);
467
- --wm-badge-info-background: var(--wm-color-info-container);
468
- --wm-badge-success: var(--wm-color-success);
469
- --wm-badge-success-background: var(--wm-color-success-container);
470
- /* Warning Colors */
471
- --wm-badge-warning: var(--wm-color-warning);
472
- --wm-badge-warning-background: var(--wm-color-warning-container);
473
- /* Error Colors */
474
- --wm-badge-error: var(--wm-color-error);
475
- --wm-badge-error-background: var(--wm-color-error-container);
476
- /* Secondary Colors */
477
- --wm-badge-secondary: var(--wm-color-secondary);
478
- --wm-badge-secondary-background: var(--wm-color-secondary-container);
479
- /* Tertiary Colors */
480
- --wm-badge-tertiary: var(--wm-color-tertiary);
481
- --wm-badge-tertiary-background: var(--wm-color-tertiary-container);
482
- --wm-list-item-badge-background: var(--wm-color-surface-container-lowest);
483
- --wm-anchor-badge-background: var(--wm-color-black-hover);
484
- --wm-anchor-badge-padding: var(--wm-space-1) var(--wm-space-3);
485
- --wm-anchor-badge-radius: var(--wm-radius-lg);
439
+ --wm-badge-letter-spacing: var(--wm-body-small-letter-spacing);
486
440
  --wm-breadcrumb-gap: var(--wm-space-1);
487
441
  --wm-breadcrumb-item-font-size: var(--wm-body-large-font-size);
488
442
  --wm-breadcrumb-item-font-family: var(--wm-body-large-font-family);
@@ -504,8 +458,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
504
458
  --wm-breadcrumb-item-separator-color: var(--wm-color-outline);
505
459
  --wm-breadcrumb-item-separator-size: var(--wm-icon-size-sm);
506
460
  /*--Button Group--*/
507
- --wm-button-group-horizontal-radius: var(--wm-radius-pill);
508
- --wm-button-group-vertical-radius: var(--wm-radius-xs);
461
+ --wm-button-group-horizontal-radius: var(--wm-btn-radius);
462
+ --wm-button-group-vertical-radius: var(--wm-btn-xs-radius);
509
463
  /*--button--*/
510
464
  --wm-btn-font-size: var(--wm-label-large-font-size);
511
465
  --wm-btn-font-family: var(--wm-label-large-font-family);
@@ -518,8 +472,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
518
472
  --wm-btn-border-width: 1px;
519
473
  --wm-btn-border-style: solid;
520
474
  --wm-btn-border-color: none;
521
- --wm-btn-radius: var(--wm-radius-pill);
522
- --wm-btn-padding: var(--wm-space-2) var(--wm-space-6);
475
+ --wm-btn-radius: var(--wm-radius-sm);
476
+ --wm-btn-padding: var(--wm-space-0) var(--wm-space-6);
523
477
  --wm-btn-min-width: auto;
524
478
  --wm-btn-height: 40px;
525
479
  --wm-btn-gap: var(--wm-space-2);
@@ -538,7 +492,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
538
492
  --wm-btn-icon-md-height: 40px;
539
493
  --wm-btn-icon-md-margin: var(--wm-space-1);
540
494
  --wm-btn-icon-md-padding: var(--wm-space-0);
541
- --wm-btn-icon-md-radius: var(--wm-radius-pill);
495
+ --wm-btn-icon-md-radius: var(--wm-btn-radius);
542
496
  --wm-btn-icon-xs-size: var(--wm-icon-size-xs);
543
497
  --wm-btn-icon-xs-width: 24px;
544
498
  --wm-btn-icon-xs-height: 24px;
@@ -589,40 +543,40 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
589
543
  --wm-btn-default-outlined-border-color: var(--wm-color-surface-container-highest);
590
544
  --wm-btn-default-outlined-state-layer-color: var(--wm-btn-color);
591
545
  --wm-btn-primary-outlined-background: transparent;
592
- --wm-btn-primary-outlined-color: var(--wm-btn-primary-background);
593
- --wm-btn-primary-outlined-border-color: var(--wm-btn-primary-background);
594
- --wm-btn-primary-outlined-state-layer-color: var(--wm-btn-primary-background);
546
+ --wm-btn-primary-outlined-color: var(--wm-color-primary);
547
+ --wm-btn-primary-outlined-border-color: var(--wm-color-primary);
548
+ --wm-btn-primary-outlined-state-layer-color: var(--wm-color-primary);
595
549
  --wm-btn-secondary-outlined-background: transparent;
596
- --wm-btn-secondary-outlined-color: var(--wm-btn-secondary-background);
597
- --wm-btn-secondary-outlined-border-color: var(--wm-btn-secondary-background);
598
- --wm-btn-secondary-outlined-state-layer-color: var(--wm-btn-secondary-background);
550
+ --wm-btn-secondary-outlined-color: var(--wm-color-secondary);
551
+ --wm-btn-secondary-outlined-border-color: var(--wm-color-secondary);
552
+ --wm-btn-secondary-outlined-state-layer-color: var(--wm-color-secondary);
599
553
  --wm-btn-tertiary-outlined-background: transparent;
600
- --wm-btn-tertiary-outlined-color: var(--wm-btn-tertiary-background);
601
- --wm-btn-tertiary-outlined-border-color: var(--wm-btn-tertiary-background);
602
- --wm-btn-tertiary-outlined-state-layer-color: var(--wm-btn-tertiary-background);
554
+ --wm-btn-tertiary-outlined-color: var(--wm-color-tertiary);
555
+ --wm-btn-tertiary-outlined-border-color: var(--wm-color-tertiary);
556
+ --wm-btn-tertiary-outlined-state-layer-color: var(--wm-color-tertiary);
603
557
  --wm-btn-success-outlined-background: transparent;
604
- --wm-btn-success-outlined-color: var(--wm-btn-success-background);
605
- --wm-btn-success-outlined-border-color: var(--wm-btn-success-background);
606
- --wm-btn-success-outlined-state-layer-color: var(--wm-btn-success-background);
558
+ --wm-btn-success-outlined-color: var(--wm-color-primary);
559
+ --wm-btn-success-outlined-border-color: var(--wm-color-primary);
560
+ --wm-btn-success-outlined-state-layer-color: var(--wm-color-primary);
607
561
  --wm-btn-info-outlined-background: transparent;
608
- --wm-btn-info-outlined-color: var(--wm-btn-info-background);
609
- --wm-btn-info-outlined-border-color: var(--wm-btn-info-background);
610
- --wm-btn-info-outlined-state-layer-color: var(--wm-btn-info-background);
562
+ --wm-btn-info-outlined-color: var(--wm-color-info);
563
+ --wm-btn-info-outlined-border-color: var(--wm-color-info);
564
+ --wm-btn-info-outlined-state-layer-color: var(--wm-color-info);
611
565
  --wm-btn-warning-outlined-background: transparent;
612
- --wm-btn-warning-outlined-color: var(--wm-btn-warning-background);
613
- --wm-btn-warning-outlined-border-color: var(--wm-btn-warning-background);
614
- --wm-btn-warning-outlined-state-layer-color: var(--wm-btn-warning-background);
566
+ --wm-btn-warning-outlined-color: var(--wm-color-warning);
567
+ --wm-btn-warning-outlined-border-color: var(--wm-color-warning);
568
+ --wm-btn-warning-outlined-state-layer-color: var(--wm-color-warning);
615
569
  --wm-btn-danger-outlined-background: transparent;
616
- --wm-btn-danger-outlined-color: var(--wm-btn-danger-background);
617
- --wm-btn-danger-outlined-border-color: var(--wm-btn-danger-background);
618
- --wm-btn-danger-outlined-state-layer-color: var(--wm-btn-danger-background);
570
+ --wm-btn-danger-outlined-color: var(--wm-color-error);
571
+ --wm-btn-danger-outlined-border-color: var(--wm-color-error);
572
+ --wm-btn-danger-outlined-state-layer-color: var(--wm-color-error);
619
573
  --wm-btn-xs-font-size: var(--wm-label-small-font-size);
620
574
  --wm-btn-xs-font-family: var(--wm-label-small-font-family);
621
575
  --wm-btn-xs-font-weight: var(--wm-label-small-font-weight);
622
576
  --wm-btn-xs-line-height: var(--wm-label-small-line-height);
623
577
  --wm-btn-xs-letter-spacing: var(--wm-label-small-letter-spacing);
624
- --wm-btn-xs-radius: var(--wm-radius-pill);
625
- --wm-btn-xs-padding: var(--wm-space-1) var(--wm-space-4);
578
+ --wm-btn-xs-radius: var(--wm-btn-radius);
579
+ --wm-btn-xs-padding: var(--wm-space-0) var(--wm-space-4);
626
580
  --wm-btn-xs-min-width: auto;
627
581
  --wm-btn-xs-height: 32px;
628
582
  --wm-btn-xs-gap: var(--wm-space-1);
@@ -632,8 +586,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
632
586
  --wm-btn-sm-font-weight: var(--wm-label-medium-font-weight);
633
587
  --wm-btn-sm-line-height: var(--wm-label-medium-line-height);
634
588
  --wm-btn-sm-letter-spacing: var(--wm-label-medium-letter-spacing);
635
- --wm-btn-sm-radius: var(--wm-radius-pill);
636
- --wm-btn-sm-padding: var(--wm-space-1) var(--wm-space-4);
589
+ --wm-btn-sm-radius: var(--wm-btn-radius);
590
+ --wm-btn-sm-padding: var(--wm-space-0) var(--wm-space-4);
637
591
  --wm-btn-sm-min-width: auto;
638
592
  --wm-btn-sm-height: 36px;
639
593
  --wm-btn-sm-gap: var(--wm-space-1);
@@ -643,8 +597,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
643
597
  --wm-btn-lg-font-weight: var(--wm-body-large-font-weight);
644
598
  --wm-btn-lg-line-height: var(--wm-body-large-line-height);
645
599
  --wm-btn-lg-letter-spacing: var(--wm-body-large-letter-spacing);
646
- --wm-btn-lg-radius: var(--wm-radius-pill);
647
- --wm-btn-lg-padding: var(--wm-space-2) var(--wm-space-8);
600
+ --wm-btn-lg-radius: var(--wm-btn-radius);
601
+ --wm-btn-lg-padding: var(--wm-space-0) var(--wm-space-8);
648
602
  --wm-btn-lg-min-width: auto;
649
603
  --wm-btn-lg-height: 44px;
650
604
  --wm-btn-lg-gap: var(--wm-space-2);
@@ -652,6 +606,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
652
606
  /*--card--*/
653
607
  --wm-card-list-gap: var(--wm-space-4);
654
608
  --wm-card-background: var(--wm-color-surface);
609
+ --wm-card-background-active: var(--wm-color-secondary-container);
655
610
  --wm-card-border-width: var(--wm-border-width);
656
611
  --wm-card-border-style: var(--wm-border-style);
657
612
  --wm-card-border-color: var(--wm-color-outline-variant);
@@ -673,6 +628,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
673
628
  --wm-card-elevation-shadow-active: var(--wm-elevation-shadow-1);
674
629
  --wm-card-elevation-shadow-drag: var(--wm-elevation-shadow-4);
675
630
  --wm-card-filled-border-width: 0;
631
+ --wm-card-filled-background: var(--wm-color-surface-bright);
676
632
  --wm-card-filled-shadow: none;
677
633
  --wm-card-filled-shadow-hover: var(--wm-elevation-shadow-1);
678
634
  --wm-card-filled-shadow-focus: var(--wm-elevation-shadow-1);
@@ -751,21 +707,20 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
751
707
  --wm-checkbox-caption-line-height: var(--wm-body-large-line-height);
752
708
  --wm-checkbox-caption-letter-spacing: var(--wm-body-large-letter-spacing);
753
709
  --wm-checkbox-size: 18px;
710
+ --wm-checkbox-icon-size: 10px;
754
711
  --wm-checkbox-background: transparent;
755
712
  --wm-checkbox-border-width: 2px;
756
713
  --wm-checkbox-border-color: var(--wm-color-on-surface-variant);
757
714
  --wm-checkbox-border-radius: var(--wm-radius-xxs);
758
- --wm-checkbox-background-selected: var(--wm-color-primary);
759
- --wm-checkbox-icon-color-selected: var(--wm-color-on-primary);
760
- --wm-checkbox-border-color-selected: var(--wm-color-primary);
715
+ --wm-checkbox-background-selected: var(--wm-color-secondary);
716
+ --wm-checkbox-icon-color-selected: var(--wm-color-on-secondary);
717
+ --wm-checkbox-border-color-selected: var(--wm-color-secondary);
761
718
  --wm-checkbox-state-layer-size: 40px;
762
- --wm-checkbox-state-hover: var(--wm-color-on-surface-hover);
763
- --wm-checkbox-state-focus: var(--wm-color-on-surface-focus);
764
- --wm-checkbox-state-active: var(--wm-color-on-surface-active);
765
- --wm-checkbox-selected-state-hover: var(--wm-color-primary-hover);
766
- --wm-checkbox-selected-state-focus: var(--wm-color-primary-focus);
767
- --wm-checkbox-selected-state-active: var(--wm-color-primary-active);
768
- --wm-checkbox-icon-size: 10px;
719
+ --wm-checkbox-state-layer-color: var(--wm-color-on-surface);
720
+ --wm-checkbox-state-layer-opacity: 0;
721
+ --wm-checkbox-state-layer-opacity-hover: var(--wm-opacity-hover);
722
+ --wm-checkbox-state-layer-opacity-focus: var(--wm-opacity-focus);
723
+ --wm-checkbox-state-layer-opacity-active: var(--wm-opacity-active);
769
724
  --wm-checkboxset-item-gap: var(--wm-space-6);
770
725
  /* --chips-- */
771
726
  --wm-chips-list-gap: var(--wm-space-3);
@@ -826,7 +781,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
826
781
  --wm-form-control-background: var(--wm-color-surface-container-lowest);
827
782
  --wm-form-control-border-width: var(--wm-border-width);
828
783
  --wm-form-control-border-style: var(--wm-border-style);
829
- --wm-form-control-border-width-focus: calc(var(--wm-border-width) * 3);
784
+ --wm-form-control-border-width-focus: 2px;
830
785
  --wm-form-control-border-color: var(--wm-color-outline);
831
786
  --wm-form-control-border-color-hover: var(--wm-color-on-surface);
832
787
  --wm-form-control-border-color-focus: var(--wm-color-secondary);
@@ -846,10 +801,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
846
801
  --wm-help-block-font-weight: var(--wm-body-small-font-weight);
847
802
  --wm-help-block-line-height: var(--wm-body-small-line-height);
848
803
  --wm-help-block-letter-spacing: var(--wm-body-small-letter-spacing);
849
- --wm-input-group-btn-width: var(--wm-space-10);
850
- --wm-input-group-btn-height: var(--wm-space-10);
851
- --wm-input-group-btn-font-size: var(--wm-icon-size);
852
- --wm-input-group-btn-border-radius: var(--wm-btn-radius);
804
+ --wm-input-group-btn-width: var(--wm-btn-icon-md-width);
805
+ --wm-input-group-btn-height: var(--wm-btn-icon-md-height);
806
+ --wm-input-group-btn-font-size: var(--wm-btn-icon-md-size);
807
+ --wm-input-group-btn-border-radius: var(--wm-btn-icon-md-radius);
853
808
  /*--Container--*/
854
809
  --wm-container-outlined-border-color: var(--wm-color-outline-variant);
855
810
  --wm-container-outlined-border-width: var(--wm-border-width);
@@ -868,10 +823,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
868
823
  --wm-data-table-overlay-color: var(--wm-color-black);
869
824
  --wm-data-table-overlay-opacity: 75%;
870
825
  --wm-data-table-border-spacing: unset;
871
- --wm-data-table-padding: var(--wm-space-2) var(--wm-space-4);
826
+ --wm-data-table-padding: var(--wm-space-3);
872
827
  --wm-data-table-padding-condensed: var(--wm-space-1) var(--wm-space-2);
873
- --wm-data-table-thead-tr-color: var(--wm-color-on-surface);
874
- --wm-data-table-thead-tr-background: var(--wm-color-surface);
828
+ --wm-data-table-thead-tr-color: var(--wm-color-on-background);
829
+ --wm-data-table-thead-tr-background: var(--wm-color-surface-variant);
875
830
  --wm-data-table-thead-tr-font-size: var(--wm-h5-font-size);
876
831
  --wm-data-table-thead-tr-font-weight: var(--wm-h5-font-weight);
877
832
  --wm-data-table-thead-tr-font-family: var(--wm-h5-font-family);
@@ -885,17 +840,19 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
885
840
  --wm-data-table-tbody-tr-background: var(--wm-color-surface-container-lowest);
886
841
  --wm-data-table-tbody-tr-background-hover: var(--wm-color-surface-container-low);
887
842
  --wm-data-table-tbody-tr-background-active: var(--wm-color-surface-variant);
843
+ --wm-data-table-tbody-tr-color: var(--wm-color-on-background);
888
844
  --wm-data-table-tbody-tr-font-size: var(--wm-body-large-font-size);
889
845
  --wm-data-table-tbody-tr-font-weight: var(--wm-body-large-font-weight);
890
846
  --wm-data-table-tbody-tr-font-family: var(--wm-body-large-font-family);
891
847
  --wm-data-table-tbody-tr-line-height: var(--wm-body-large-line-height);
892
848
  --wm-data-table-tbody-tr-letter-spacing: var(--wm-body-large-letter-spacing);
893
- --wm-data-table-tbody-tr-color: var(--wm-color-on-surface);
894
849
  --wm-data-table-tbody-td-padding: var(--wm-data-table-padding);
895
850
  --wm-data-table-tbody-td-border-width: var(--wm-border-width);
896
851
  --wm-data-table-tbody-td-border-style: var(--wm-border-style);
897
852
  --wm-data-table-tbody-td-border-color: var(--wm-border-color);
898
853
  --wm-data-table-tbody-td-border-radius: var(--wm-radius-md);
854
+ --wm-data-table-sort-icon-size: var(--wm-icon-size-sm);
855
+ --wm-data-table-sort-icon-color: var(--wm-data-table-thead-tr-color);
899
856
  /* datepicker variables */
900
857
  --wm-datepicker-color: var(--wm-color-on-surface);
901
858
  --wm-datepicker-background: var(--wm-color-surface-container-high);
@@ -985,6 +942,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
985
942
  --wm-file-upload-message-anchor-line-height: var(--wm-body-medium-line-height);
986
943
  --wm-file-upload-media-icon-size: var(--wm-icon-size);
987
944
  --wm-file-upload-media-icon-padding: var(--wm-space-1);
945
+ --wm-icon-gap: var(--wm-space-1);
946
+ --wm-grid-layout-row-gap: var(--wm-space-0);
947
+ --wm-grid-layout-column-padding: var(--wm-space-2);
988
948
  --wm-list-background: var(--wm-color-surface);
989
949
  --wm-list-min-height: 6rem;
990
950
  --wm-list-state-layer-color: var(--wm-color-on-surface);
@@ -999,6 +959,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
999
959
  --wm-list-item-header-color: var(--wm-color-on-surface);
1000
960
  /* list variables */
1001
961
  --wm-list-disabled-opacity: 0.38;
962
+ /*headings*/
963
+ --wm-headings-color: var(--wm-color-on-surface);
1002
964
  /*--Message--*/
1003
965
  --wm-message-container-shadow: var(--wm-elevation-shadow-3);
1004
966
  --wm-message-container-border-radius: var(--wm-radius-xs);
@@ -1101,7 +1063,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1101
1063
  --wm-nav-tabs-item-min-height: 48px;
1102
1064
  --wm-nav-tabs-item-radius: var(--wm-radius-none);
1103
1065
  --wm-nav-tabs-indicator-height: 3px;
1104
- --wm-nav-tabs-indicator-background: var(--wm-color-primary);
1066
+ --wm-nav-tabs-indicator-background: var(--wm-color-secondary);
1105
1067
  --wm-nav-tabs-indicator-radius: var(--wm-radius-md) var(--wm-radius-md) var(--wm-radius-none) var(--wm-radius-none);
1106
1068
  --wm-nav-tabs-indicator-width: calc(100% - var(--wm-space-12));
1107
1069
  --wm-nav-tabs-stacked-min-height: var(--wm-nav-tabs-stacked-item-min-height);
@@ -1124,11 +1086,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1124
1086
  /*--app header--*/
1125
1087
  --wm-header-background: var(--wm-color-white);
1126
1088
  --wm-header-color: var(--wm-color-on-surface-variant);
1127
- --wm-header-height: auto;
1089
+ --wm-header-height: 82px;
1128
1090
  --wm-header-zindex: 2;
1091
+ --wm-header-padding: var(--wm-space-2) var(--wm-space-4);
1129
1092
  --wm-header-border: 1px solid var(--wm-color-outline-variant);
1130
- --wm-header-shadow: inset 0px 0px 0 0 var(--wm-color-secondary);
1131
- --wm-header-padding: 0;
1093
+ --wm-header-shadow: var(--wm-elevation-shadow-none);
1132
1094
  --wm-header-logo-height: 42px;
1133
1095
  --wm-header-link-size: var(--wm-h4-font-size);
1134
1096
  --wm-header-link-color: var(--wm-color-secondary);
@@ -1145,15 +1107,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1145
1107
  --wm-aside-panel-background: var(--wm-color-surface-container-lowest);
1146
1108
  --wm-aside-panel-color: var(--wm-color-on-surface-variant);
1147
1109
  --wm-aside-panel-border: 1px solid var(--wm-color-outline-variant);
1148
- --wm-aside-panel-shadow: var(--wm-elevation-shadow-1);
1149
- --wm-aside-panel-padding-top: var(--wm-space-3);
1150
- --wm-aside-panel-padding-right: var(--wm-space-3);
1151
- --wm-aside-panel-padding-bottom: var(--wm-space-3);
1152
- --wm-aside-panel-padding-left: var(--wm-space-3);
1110
+ --wm-aside-panel-shadow: var(--wm-elevation-shadow-none);
1111
+ --wm-aside-panel-padding-top: var(--wm-space-5);
1112
+ --wm-aside-panel-padding-right: var(--wm-space-0);
1113
+ --wm-aside-panel-padding-bottom: var(--wm-space-0);
1114
+ --wm-aside-panel-padding-left: var(--wm-space-0);
1153
1115
  --wm-aside-nav-padding: var(--wm-space-0);
1154
1116
  --wm-aside-nav-background: var(--wm-aside-panel-background);
1155
1117
  --wm-aside-nav-color: var(--wm-aside-panel-color);
1156
- --wm-aside-nav-gap: var(--wm-space-0);
1118
+ --wm-aside-nav-gap: var(--wm-space-1);
1157
1119
  --wm-aside-nav-item-min-height: 56px;
1158
1120
  --wm-aside-nav-item-padding: var(--wm-space-2) var(--wm-space-6);
1159
1121
  --wm-aside-nav-item-font-size: var(--wm-label-large-font-size);
@@ -1161,7 +1123,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1161
1123
  --wm-aside-nav-item-font-weight: var(--wm-label-large-font-weight);
1162
1124
  --wm-aside-nav-item-line-height: var(--wm-label-large-line-height);
1163
1125
  --wm-aside-nav-item-letter-spacing: var(--wm-label-large-letter-spacing);
1164
- --wm-aside-nav-item-radius: var(--wm-radius-pill);
1126
+ --wm-aside-nav-item-radius: var(--wm-radius-none);
1165
1127
  --wm-aside-nav-item-icon-size: var(--wm-icon-size);
1166
1128
  --wm-aside-nav-item-icon-width: var(--wm-icon-size);
1167
1129
  --wm-aside-nav-item-icon-height: var(--wm-icon-size);
@@ -1173,18 +1135,27 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1173
1135
  --wm-aside-nav-item-gap: var(--wm-space-2);
1174
1136
  --wm-aside-nav-item-color: var(--wm-aside-nav-color);
1175
1137
  --wm-aside-nav-item-background: var(--wm-aside-nav-background);
1176
- --wm-aside-nav-item-color-active: var(--wm-color-on-secondary-container);
1177
- --wm-aside-nav-item-background-active: var(--wm-color-secondary-container);
1138
+ --wm-aside-nav-item-color-active: var(--wm-color-secondary);
1139
+ --wm-aside-nav-item-background-active: linear-gradient(106deg, var(--wm-color-secondary-hover) 44.21%, var(--wm-color-primary-hover) 103.73%);
1178
1140
  --wm-aside-nav-item-state-layer-color: var(--wm-color-on-surface);
1179
1141
  --wm-aside-nav-item-state-layer-opacity-hover: var(--wm-opacity-hover);
1180
1142
  --wm-aside-nav-item-state-layer-opacity-focus: var(--wm-opacity-focus);
1181
1143
  --wm-aside-nav-item-state-layer-opacity-active: var(--wm-opacity-active);
1182
1144
  --wm-aside-nav-item-caret-size: var(--wm-icon-size-sm);
1145
+ --wm-aside-nav-item-indicator-width: 1px;
1146
+ --wm-aside-nav-item-indicator-height: 100%;
1147
+ --wm-aside-nav-item-indicator-position-top: 0;
1148
+ --wm-aside-nav-item-indicator-position-right: 0;
1149
+ --wm-aside-nav-item-indicator-position-bottom: 0;
1150
+ --wm-aside-nav-item-indicator-position-left: auto;
1151
+ --wm-aside-nav-item-indicator-radius: 0;
1152
+ --wm-aside-nav-item-indicator-color: none;
1153
+ --wm-aside-nav-item-indicator-color-active: var(--wm-color-secondary);
1183
1154
  --wm-aside-nav-submenu-padding: var(--wm-space-0) var(--wm-space-0) var(--wm-space-0) var(--wm-space-3);
1184
1155
  --wm-aside-nav-submenu-background: var(--wm-aside-nav-item-background);
1185
1156
  --wm-aside-nav-submenu-color: var(--wm-aside-nav-item-color);
1186
1157
  --wm-aside-nav-submenu-box-shadow: none;
1187
- --wm-aside-nav-submenu-radius: var(--wm-radius-none);
1158
+ --wm-aside-nav-submenu-radius: var(--wm-radius-none) var(--wm-radius-sm) var(--wm-radius-sm) var(--wm-radius-none);
1188
1159
  --wm-aside-nav-submenu-item-min-height: 44px;
1189
1160
  --wm-aside-nav-submenu-item-padding: var(--wm-space-2) var(--wm-space-6);
1190
1161
  --wm-aside-nav-submenu-item-font-size: var(--wm-label-large-font-size);
@@ -1192,52 +1163,70 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1192
1163
  --wm-aside-nav-submenu-item-font-weight: var(--wm-label-large-font-weight);
1193
1164
  --wm-aside-nav-submenu-item-line-height: var(--wm-label-large-line-height);
1194
1165
  --wm-aside-nav-submenu-item-letter-spacing: var(--wm-label-large-letter-spacing);
1195
- --wm-aside-nav-submenu-item-radius: var(--wm-radius-pill);
1166
+ --wm-aside-nav-submenu-item-radius: var(--wm-aside-nav-item-radius);
1196
1167
  --wm-aside-nav-submenu-item-gap: var(--wm-space-2);
1197
1168
  --wm-aside-nav-submenu-item-color: var(--wm-aside-nav-submenu-color);
1198
1169
  --wm-aside-nav-submenu-item-background: var(--wm-aside-nav-submenu-background);
1199
1170
  --wm-aside-nav-submenu-item-color-active: var(--wm-color-on-secondary-container);
1200
1171
  --wm-aside-nav-submenu-item-background-active: var(--wm-color-secondary-container);
1201
- --wm-aside-panel-rail-width: 80px;
1202
- --wm-aside-panel-rail-background: var(--wm-color-surface);
1172
+ --wm-aside-panel-rail-width: 102px;
1173
+ --wm-aside-panel-rail-background: var(--wm-color-surface-container-lowest);
1203
1174
  --wm-aside-panel-rail-color: var(--wm-color-on-surface-variant);
1204
- --wm-aside-panel-rail-padding-top: var(--wm-space-3);
1205
- --wm-aside-panel-rail-padding-right: var(--wm-space-2);
1206
- --wm-aside-panel-rail-padding-bottom: var(--wm-space-3);
1207
- --wm-aside-panel-rail-padding-left: var(--wm-space-2);
1175
+ --wm-aside-panel-rail-border: 1px solid var(--wm-color-outline-variant);
1176
+ --wm-aside-panel-rail-shadow: var(--wm-elevation-shadow-none);
1177
+ --wm-aside-panel-rail-padding-top: var(--wm-space-7);
1178
+ --wm-aside-panel-rail-padding-right: var(--wm-space-0);
1179
+ --wm-aside-panel-rail-padding-bottom: var(--wm-space-0);
1180
+ --wm-aside-panel-rail-padding-left: var(--wm-space-0);
1181
+ --wm-aside-nav-rail-padding: var(--wm-space-0);
1208
1182
  --wm-aside-nav-rail-background: var(--wm-aside-panel-rail-background);
1209
1183
  --wm-aside-nav-rail-color: var(--wm-aside-panel-rail-color);
1210
1184
  --wm-aside-nav-rail-gap: var(--wm-space-3);
1211
- --wm-aside-nav-rail-item-padding: 0;
1185
+ --wm-aside-nav-rail-item-height: 90px;
1186
+ --wm-aside-nav-rail-item-padding: var(--wm-space-3) var(--wm-space-0);
1212
1187
  --wm-aside-nav-rail-item-font-size: var(--wm-label-medium-font-size);
1213
1188
  --wm-aside-nav-rail-item-font-family: var(--wm-label-medium-font-family);
1214
1189
  --wm-aside-nav-rail-item-font-weight: var(--wm-label-medium-font-weight);
1190
+ --wm-aside-nav-rail-item-font-weight-active: var(--wm-font-weight-semibold);
1215
1191
  --wm-aside-nav-rail-item-line-height: var(--wm-label-medium-line-height);
1216
1192
  --wm-aside-nav-rail-item-letter-spacing: var(--wm-label-medium-letter-spacing);
1217
1193
  --wm-aside-nav-rail-item-color: var(--wm-aside-nav-rail-color);
1218
1194
  --wm-aside-nav-rail-item-background: var(--wm-aside-nav-rail-background);
1219
- --wm-aside-nav-rail-item-color-active: var(--wm-color-on-surface);
1220
- --wm-aside-nav-rail-item-background-active: none;
1221
- --wm-aside-nav-rail-item-radius: var(--wm-radius-pill);
1195
+ --wm-aside-nav-rail-item-color-active: var(--wm-color-secondary);
1196
+ --wm-aside-nav-rail-item-background-active: linear-gradient(106deg, var(--wm-color-secondary-hover) 44.21%, var(--wm-color-primary-hover) 103.73%);
1197
+ --wm-aside-nav-rail-item-radius: var(--wm-radius-none);
1222
1198
  --wm-aside-nav-rail-item-gap: var(--wm-space-1);
1199
+ --wm-aside-nav-rail-item-state-layer-color: var(--wm-color-on-surface);
1200
+ --wm-aside-nav-rail-item-state-layer-opacity-hover: var(--wm-opacity-hover);
1201
+ --wm-aside-nav-rail-item-state-layer-opacity-focus: var(--wm-opacity-focus);
1202
+ --wm-aside-nav-rail-item-state-layer-opacity-active: var(--wm-opacity-active);
1223
1203
  --wm-aside-nav-rail-item-icon-size: 24px;
1224
- --wm-aside-nav-rail-item-icon-width: 44px;
1225
- --wm-aside-nav-rail-item-icon-height: 44px;
1226
- --wm-aside-nav-rail-item-icon-radius: var(--wm-radius-sm);
1227
- --wm-aside-nav-rail-item-icon-radius-active: var(--wm-aside-nav-rail-item-icon-radius);
1204
+ --wm-aside-nav-rail-item-icon-width: 40px;
1205
+ --wm-aside-nav-rail-item-icon-height: 40px;
1206
+ --wm-aside-nav-rail-item-icon-radius: var(--wm-radius-none);
1207
+ --wm-aside-nav-rail-item-icon-radius-active: var(--wm-radius-none);
1228
1208
  --wm-aside-nav-rail-item-icon-color: var(--wm-aside-nav-rail-item-color);
1229
- --wm-aside-nav-rail-item-icon-background: var(--wm-aside-nav-rail-item-background);
1230
- --wm-aside-nav-rail-item-icon-color-active: var(--wm-color-on-secondary-container);
1231
- --wm-aside-nav-rail-item-icon-background-active: var(--wm-color-secondary-container);
1232
- --wm-aside-nav-rail-item-icon-state-layer-color: var(--wm-color-on-surface);
1209
+ --wm-aside-nav-rail-item-icon-background: none;
1210
+ --wm-aside-nav-rail-item-icon-color-active: var(--wm-aside-nav-rail-item-color-active);
1211
+ --wm-aside-nav-rail-item-icon-background-active: none;
1212
+ --wm-aside-nav-rail-item-icon-state-layer-color: none;
1233
1213
  --wm-aside-nav-rail-item-icon-state-layer-opacity-hover: var(--wm-opacity-hover);
1234
1214
  --wm-aside-nav-rail-item-icon-state-layer-opacity-focus: var(--wm-opacity-focus);
1235
1215
  --wm-aside-nav-rail-item-icon-state-layer-opacity-active: var(--wm-opacity-active);
1236
- --wm-aside-nav-rail-submenu-padding: var(--wm-space-3) var(--wm-space-2);
1216
+ --wm-aside-nav-rail-item-indicator-width: var(--wm-aside-nav-item-indicator-width);
1217
+ --wm-aside-nav-rail-item-indicator-height: var(--wm-aside-nav-item-indicator-height);
1218
+ --wm-aside-nav-rail-item-indicator-position-top: var(--wm-aside-nav-item-indicator-position-top);
1219
+ --wm-aside-nav-rail-item-indicator-position-right: var(--wm-aside-nav-item-indicator-position-right);
1220
+ --wm-aside-nav-rail-item-indicator-position-bottom: var(--wm-aside-nav-item-indicator-position-bottom);
1221
+ --wm-aside-nav-rail-item-indicator-position-left: var(--wm-aside-nav-item-indicator-position-left);
1222
+ --wm-aside-nav-rail-item-indicator-radius: var(--wm-aside-nav-item-indicator-radius);
1223
+ --wm-aside-nav-rail-item-indicator-color: var(--wm-aside-nav-item-indicator-color);
1224
+ --wm-aside-nav-rail-item-indicator-color-active: var(--wm-aside-nav-item-indicator-color-active);
1225
+ --wm-aside-nav-rail-submenu-padding: var(--wm-space-2);
1237
1226
  --wm-aside-nav-rail-submenu-background: var(--wm-aside-nav-rail-background);
1238
1227
  --wm-aside-nav-rail-submenu-color: var(--wm-aside-nav-rail-color);
1239
1228
  --wm-aside-nav-rail-submenu-box-shadow: var(--wm-elevation-shadow-1);
1240
- --wm-aside-nav-rail-submenu-radius: var(--wm-radius-none) var(--wm-radius-sm) var(--wm-radius-sm) var(--wm-radius-none);
1229
+ --wm-aside-nav-rail-submenu-radius: var(--wm-aside-nav-submenu-radius);
1241
1230
  --wm-aside-nav-rail-submenu-width: 260px;
1242
1231
  --wm-aside-nav-rail-submenu-item-min-height: 44px;
1243
1232
  --wm-aside-nav-rail-submenu-item-padding: var(--wm-space-2) var(--wm-space-6);
@@ -1246,7 +1235,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1246
1235
  --wm-aside-nav-rail-submenu-item-font-weight: var(--wm-label-large-font-weight);
1247
1236
  --wm-aside-nav-rail-submenu-item-line-height: var(--wm-label-large-line-height);
1248
1237
  --wm-aside-nav-rail-submenu-item-letter-spacing: var(--wm-label-large-letter-spacing);
1249
- --wm-aside-nav-rail-submenu-item-radius: var(--wm-radius-pill);
1238
+ --wm-aside-nav-rail-submenu-item-radius: var(--wm-aside-nav-rail-item-radius);
1250
1239
  --wm-aside-nav-rail-submenu-item-gap: var(--wm-space-2);
1251
1240
  --wm-aside-nav-rail-submenu-item-color: var(--wm-aside-nav-rail-submenu-color);
1252
1241
  --wm-aside-nav-rail-submenu-item-background: var(--wm-aside-nav-rail-submenu-background);
@@ -1315,7 +1304,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1315
1304
  --wm-horizontal-page-slider-anchor-icon-size: var(--wm-icon-size-sm);
1316
1305
  /* panel variables */
1317
1306
  --wm-panel-background: var(--wm-color-surface-container-lowest);
1318
- --wm-panel-radius: var(--wm-radius-md);
1307
+ --wm-panel-radius: var(--wm-radius-xs);
1319
1308
  --wm-panel-shadow: var(--wm-elevation-shadow-1);
1320
1309
  --wm-panel-heading-gap: var(--wm-space-2);
1321
1310
  --wm-panel-heading-padding: var(--wm-space-4);
@@ -1331,7 +1320,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1331
1320
  --wm-panel-description-font-weight: var(--wm-body-medium-font-weight);
1332
1321
  --wm-panel-description-line-height: var(--wm-body-medium-line-height);
1333
1322
  --wm-panel-description-letter-spacing: var(--wm-body-medium-letter-spacing);
1334
- --wm-panel-description-color: var(--wm-color-on-surface);
1323
+ --wm-panel-description-color: var(--wm-color-on-surface-variant);
1335
1324
  --wm-panel-actions-gap: var(--wm-space-2);
1336
1325
  --wm-panel-content-padding: var(--wm-space-4);
1337
1326
  --wm-panel-help-message-header-background: var(--wm-color-surface-container-lowest);
@@ -1344,34 +1333,30 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1344
1333
  --wm-panel-footer-border: var(--wm-color-outline-variant);
1345
1334
  --wm-panel-footer-border-width: var(--wm-border-width);
1346
1335
  --wm-panel-footer-border-style: var(--wm-border-style);
1336
+ /* default */
1337
+ --wm-panel-background-default: var(--wm-color-surface-container);
1338
+ --wm-panel-heading-color-default: var(--wm-color-on-surface);
1347
1339
  /* primary */
1348
1340
  --wm-panel-background-primary: var(--wm-color-primary-container);
1349
1341
  --wm-panel-heading-color-primary: var(--wm-color-primary);
1350
- --wm-panel-description-color-primary: var(--wm-color-primary);
1351
1342
  /* secondary */
1352
1343
  --wm-panel-background-secondary: var(--wm-color-secondary-container);
1353
1344
  --wm-panel-heading-color-secondary: var(--wm-color-secondary);
1354
- --wm-panel-description-color-secondary: var(--wm-color-secondary);
1355
1345
  /* tertiary */
1356
1346
  --wm-panel-background-tertiary: var(--wm-color-tertiary-container);
1357
1347
  --wm-panel-heading-color-tertiary: var(--wm-color-tertiary);
1358
- --wm-panel-description-color-tertiary: var(--wm-color-tertiary);
1359
1348
  /* success */
1360
1349
  --wm-panel-background-success: var(--wm-color-success-container);
1361
1350
  --wm-panel-heading-color-success: var(--wm-color-success);
1362
- --wm-panel-description-color-success: var(--wm-color-success);
1363
1351
  /* info */
1364
1352
  --wm-panel-background-info: var(--wm-color-info-container);
1365
1353
  --wm-panel-heading-color-info: var(--wm-color-info);
1366
- --wm-panel-description-color-info: var(--wm-color-info);
1367
1354
  /* warning */
1368
1355
  --wm-panel-background-warning: var(--wm-color-warning-container);
1369
1356
  --wm-panel-heading-color-warning: var(--wm-color-warning);
1370
- --wm-panel-description-color-warning: var(--wm-color-warning);
1371
1357
  /* danger */
1372
1358
  --wm-panel-background-danger: var(--wm-color-error-container);
1373
1359
  --wm-panel-heading-color-danger: var(--wm-color-error);
1374
- --wm-panel-description-color-danger: var(--wm-color-error);
1375
1360
  /*--Picture--*/
1376
1361
  --wm-picture-radius-rounded: var(--wm-radius-xs);
1377
1362
  --wm-picture-radius-circle: var(--wm-radius-circle);
@@ -1416,30 +1401,27 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1416
1401
  --wm-progress-circle-danger-stroke-active: var(--wm-color-error);
1417
1402
  /*--radiobutton--*/
1418
1403
  --wm-radiobutton-gap: var(--wm-space-1);
1419
- --wm-radiobutton-caption-font-size: var(--wm-body-large-font-size);
1420
- --wm-radiobutton-caption-font-family: var(--wm-body-large-font-family);
1421
- --wm-radiobutton-caption-font-weight: var(--wm-body-large-font-weight);
1422
- --wm-radiobutton-caption-line-height: var(--wm-body-large-line-height);
1423
- --wm-radiobutton-caption-letter-spacing: var(--wm-body-large-letter-spacing);
1424
- --wm-radiobutton-caption-color: var(--wm-color-on-surface);
1404
+ --wm-radiobutton-label-font-size: var(--wm-body-large-font-size);
1405
+ --wm-radiobutton-label-font-family: var(--wm-body-large-font-family);
1406
+ --wm-radiobutton-label-font-weight: var(--wm-body-large-font-weight);
1407
+ --wm-radiobutton-label-line-height: var(--wm-body-large-line-height);
1408
+ --wm-radiobutton-label-letter-spacing: var(--wm-body-large-letter-spacing);
1425
1409
  --wm-radiobutton-size: 20px;
1426
1410
  --wm-radiobutton-indicator-size: 10px;
1427
- --wm-radiobutton-background: transparent;
1411
+ --wm-radiobutton-color: transparent;
1412
+ --wm-radiobutton-label-color: var(--wm-color-on-surface);
1428
1413
  --wm-radiobutton-border-width: 2px;
1429
1414
  --wm-radiobutton-border-color: var(--wm-color-on-surface-variant);
1430
- --wm-radiobutton-border-radius: var(--wm-radius-circle);
1431
- --wm-radiobutton-selected-background: transparent;
1432
- --wm-radiobutton-selected-border-color: var(--wm-color-primary);
1433
- --wm-radiobutton-selected-indicator-color: var(--wm-radiobutton-selected-border-color);
1434
- --wm-radiobutton-selected-caption-color: var(--wm-color-on-surface);
1415
+ --wm-radiobutton-color-selected: var(--wm-color-secondary);
1416
+ --wm-radiobutton-label-color-selected: var(--wm-color-on-surface);
1435
1417
  --wm-radiobutton-state-layer-size: 40px;
1436
- --wm-radiobutton-state-hover: var(--wm-color-on-surface-hover);
1437
- --wm-radiobutton-state-focus: var(--wm-color-on-surface-focus);
1438
- --wm-radiobutton-state-active: var(--wm-color-on-surface-active);
1439
- --wm-radiobutton-selected-state-hover: var(--wm-color-primary-hover);
1440
- --wm-radiobutton-selected-state-focus: var(--wm-color-primary-focus);
1441
- --wm-radiobutton-selected-state-active: var(--wm-color-primary-active);
1442
- --wm-radiobutton-set-item-gap: var(--wm-space-6);
1418
+ --wm-radiobutton-state-layer-color: var(--wm-color-on-surface);
1419
+ --wm-radiobutton-state-layer-opacity: 0;
1420
+ --wm-radiobutton-state-layer-opacity-hover: var(--wm-opacity-hover);
1421
+ --wm-radiobutton-state-layer-opacity-focus: var(--wm-opacity-focus);
1422
+ --wm-radiobutton-state-layer-opacity-active: var(--wm-opacity-active);
1423
+ --wm-radiobutton-set-item-column-gap: var(--wm-space-6);
1424
+ --wm-radiobutton-set-item-row-gap: var(--wm-space-2);
1443
1425
  /*--Rating--*/
1444
1426
  --wm-rating-gap: var(--wm-space-2);
1445
1427
  --wm-rating-icon-gap: var(--wm-space-1);
@@ -1488,9 +1470,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1488
1470
  --wm-spinner-background: var(--wm-color-scrim);
1489
1471
  --wm-spinner-background-opacity: 0.3;
1490
1472
  /*--loading data msg--*/
1491
- --wm-spinner-loading-data-msg-background: var(--wm-color-scrim-hover);
1473
+ --wm-spinner-loading-data-msg-background: var(--wm-color-scrim);
1492
1474
  --wm-spinner-loading-data-msg-color: inherit;
1493
1475
  --wm-spinner-loading-data-msg-radius: inherit;
1476
+ --wm-spinner-loading-data-msg-background-opacity: var(--wm-opacity-hover);
1494
1477
  /*--segmented button--*/
1495
1478
  --wm-switch-btn-height: 40px;
1496
1479
  --wm-switch-btn-height-sm: 36px;
@@ -1524,26 +1507,28 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1524
1507
  --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
1525
1508
  --wm-tabs-item-heading-letter-spacing: var(--wm-h6-letter-spacing);
1526
1509
  --wm-tabs-item-heading-color: var(--wm-color-on-surface-variant);
1527
- --wm-tabs-item-heading-color-active: var(--wm-color-primary);
1510
+ --wm-tabs-item-heading-color-active: var(--wm-color-secondary);
1528
1511
  --wm-tabs-item-heading-border-width: 0px;
1529
1512
  --wm-tabs-item-heading-border-style: var(--wm-border-style);
1530
1513
  --wm-tabs-item-heading-border-color: var(--wm-border-color);
1531
- --wm-tabs-item-heading-state-layer-color: var(--wm-color-primary);
1514
+ --wm-tabs-item-heading-state-layer-color: var(--wm-color-secondary);
1532
1515
  --wm-tabs-item-heading-state-layer-opacity-hover: var(--wm-opacity-hover);
1533
1516
  --wm-tabs-item-heading-state-layer-opacity-focus: var(--wm-opacity-focus);
1534
1517
  --wm-tabs-item-heading-state-layer-opacity-active: var(--wm-opacity-active);
1535
1518
  --wm-tabs-item-heading-indicator-height: 3px;
1536
1519
  --wm-tabs-item-heading-indicator-width: calc(100% - var(--wm-space-12));
1537
1520
  --wm-tabs-item-heading-indicator-radius: var(--wm-radius-md) var(--wm-radius-md) var(--wm-radius-none) var(--wm-radius-none);
1538
- --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
1521
+ --wm-tabs-item-heading-indicator-background: var(--wm-color-secondary);
1539
1522
  --wm-tabs-content-background: inherit;
1540
1523
  --wm-tabs-body-padding: var(--wm-space-4);
1541
1524
  --wm-tabs-body-height: 100px;
1542
1525
  --wm-tile-padding: var(--wm-space-4);
1543
- --wm-tile-background: var(--wm-color-surface-container-high);
1544
- --wm-tile-color: var(--wm-color-on-surface-variant);
1526
+ --wm-tile-background: var(--wm-color-surface-container-lowest);
1527
+ --wm-tile-color: var(--wm-color-on-surface);
1545
1528
  --wm-tile-radius: var(--wm-radius-sm);
1546
1529
  --wm-tile-shadow: var(--wm-elevation-shadow-1);
1530
+ --wm-tile-default-background: var(--wm-color-surface-container-low);
1531
+ --wm-tile-default-color: var(--wm-color-on-surface-variant);
1547
1532
  --wm-tile-primary-background: var(--wm-color-primary-container);
1548
1533
  --wm-tile-primary-color: var(--wm-color-primary);
1549
1534
  --wm-tile-secondary-background: var(--wm-color-secondary-container);
@@ -1559,6 +1544,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1559
1544
  --wm-tile-danger-background: var(--wm-color-error-container);
1560
1545
  --wm-tile-danger-color: var(--wm-color-error);
1561
1546
  /*--filled--*/
1547
+ --wm-tile-filled-default-background: var(--wm-color-surface-container-highest);
1548
+ --wm-tile-filled-default-color: var(--wm-color-on-surface-variant);
1562
1549
  --wm-tile-filled-primary-background: var(--wm-color-primary);
1563
1550
  --wm-tile-filled-primary-color: var(--wm-color-on-primary);
1564
1551
  --wm-tile-filled-secondary-background: var(--wm-color-secondary);
@@ -1639,32 +1626,25 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1639
1626
  --wm-toast-container-error-color: var(--wm-color-on-error);
1640
1627
  --wm-toast-container-error-border-color: var(--wm-color-error);
1641
1628
  --wm-toast-error-icon: "\f24d";
1642
- --wm-toggle-track-background: var(--wm-color-surface-container-highest);
1643
- --wm-toggle-track-border-color: var(--wm-color-outline);
1644
- --wm-toggle-track-border-style: var(--wm-border-style);
1645
- --wm-toggle-track-border-width: 2px;
1629
+ --wm-toggle-width: 52px;
1630
+ --wm-toggle-height: 32px;
1631
+ --wm-toggle-background: var(--wm-color-surface-container-highest);
1632
+ --wm-toggle-background-selected: var(--wm-color-secondary);
1633
+ --wm-toggle-border-width: 2px;
1634
+ --wm-toggle-border-color: var(--wm-color-outline);
1635
+ --wm-toggle-border-style: var(--wm-border-style);
1636
+ --wm-toggle-radius: var(--wm-radius-pill);
1646
1637
  --wm-toggle-state-layer-size: 40px;
1647
- --wm-toggle-state-checked-background: var(--wm-color-primary);
1648
- --wm-toggle-state-hover: var(--wm-color-on-surface-hover);
1649
- --wm-toggle-state-focus: var(--wm-color-on-surface-focus);
1650
- --wm-toggle-state-active: var(--wm-color-on-surface-active);
1651
- --wm-toggle-checked-state-hover: var(--wm-color-primary-hover);
1652
- --wm-toggle-checked-state-active: var(--wm-color-primary-active);
1653
- --wm-toggle-checked-state-focus: var(--wm-color-primary-focus);
1654
- --wm-toggle-handle-checked-active-background: var(--wm-color-primary-container);
1655
- --wm-toggle-handle-checked-focus-background: var(--wm-color-primary-container);
1656
- --wm-toggle-handle-checked-hover-background: var(--wm-color-primary-container);
1657
- --wm-toggle-handle-checked-background: var(--wm-color-white);
1658
- --wm-toggle-handle-background: var(--wm-color-outline);
1659
- --wm-toggle-handle-hover-background: var(--wm-color-on-surface-variant);
1660
- --wm-toggle-handle-focus-background: var(--wm-color-on-surface-variant);
1661
- --wm-toggle-handle-active-background: var(--wm-color-on-surface-variant);
1662
- --wm-toggle-track-active-background: var(--wm-color-surface-tint);
1663
- --wm-toggle-label-min-height: 32px;
1664
- --wm-toggle-label-width: 52px;
1665
- --wm-toggle-handle-width: 16px;
1666
- --wm-toggle-handle-height: 16px;
1667
- --wm-toggle-radius: var(--wm-radius-circle);
1638
+ --wm-toggle-state-layer-color: var(--wm-color-outline);
1639
+ --wm-toggle-state-layer-color-selected: var(--wm-color-secondary);
1640
+ --wm-toggle-state-layer-opacity: 0;
1641
+ --wm-toggle-state-layer-opacity-hover: var(--wm-opacity-hover);
1642
+ --wm-toggle-state-layer-opacity-focus: var(--wm-opacity-focus);
1643
+ --wm-toggle-state-layer-opacity-active: var(--wm-opacity-active);
1644
+ --wm-toggle-handle-size: 16px;
1645
+ --wm-toggle-handle-size-selected: 24px;
1646
+ --wm-toggle-handle-color: var(--wm-color-outline);
1647
+ --wm-toggle-handle-color-selected: var(--wm-color-on-secondary);
1668
1648
  /*-- popovers --*/
1669
1649
  --wm-popover-z-index: 1060;
1670
1650
  --wm-popover-gap: calc(var(--wm-space-1) * 2.5);
@@ -1693,117 +1673,52 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1693
1673
  --wm-wizard-background: var(--wm-color-surface-container-lowest);
1694
1674
  --wm-wizard-radius: var(--wm-radius-md);
1695
1675
  --wm-wizard-shadow: var(--wm-elevation-shadow-1);
1696
- --wm-wizard-heading-padding: var(--wm-space-6) var(--wm-space-0) var(--wm-space-0) var(--wm-space-0);
1697
- --wm-wizard-heading-background: inherit;
1698
- --wm-wizard-heading-radius: inherit inherit var(--wm-radius-0) var(--wm-radius-0);
1699
- --wm-wizard-stepper-step-width: 32px;
1700
- --wm-wizard-stepper-step-height: 32px;
1701
- --wm-wizard-stepper-step-radius: var(--wm-radius-circle);
1702
- --wm-wizard-stepper-step-background: var(--wm-color-primary);
1703
- --wm-wizard-stepper-step-indicator-border: var(--wm-color-outline-variant);
1704
- --wm-wizard-stepper-step-indicator-border-height: var(--wm-border-width);
1705
- --wm-wizard-stepper-step-indicator-gap: var(--wm-space-7);
1706
- --wm-app-wizard-stepper-step-indicator-transform-y: var(--wm-space-4);
1707
- --wm-wizard-stepper-step-title-gap: var(--wm-space-2);
1708
- --wm-wizard-stepper-step-color: var(--wm-color-on-primary);
1709
- --wm-wizard-stepper-step-count-color: var(--wm-color-on-primary);
1710
- --wm-wizard-stepper-step-count-font-size: var(--wm-label-large-font-size);
1711
- --wm-wizard-stepper-step-count-font-weight: var(--wm-label-large-font-weight);
1712
- --wm-wizard-stepper-step-count-font-family: var(--wm-label-large-font-family);
1713
- --wm-wizard-stepper-step-count-line-height: var(--wm-label-large-line-height);
1714
- --wm-wizard-stepper-step-title-font-size: var(--wm-label-large-font-size);
1715
- --wm-wizard-stepper-step-title-font-weight: var(--wm-label-medium-font-weight);
1716
- --wm-wizard-stepper-step-title-font-family: var(--wm-label-medium-font-family);
1717
- --wm-wizard-stepper-step-title-line-height: var(--wm-label-medium-line-height);
1718
- --wm-wizard-stepper-step-title-color: var(--wm-color-on-surface);
1719
- --wm-wizard-stepper-step-icon-size: var(--wm-icon-size-sm);
1720
- --wm-wizard-stepper-step-icon-color: var(--wm-color-on-primary);
1721
- --wm-wizard-stepper-step-active-background: var(--wm-color-primary);
1722
- --wm-wizard-stepper-step-current-background: var(--wm-color-primary);
1723
- --wm-wizard-stepper-step-disabled-background: var(--wm-btn-disabled-opacity);
1724
- --wm-wizard-step-content-height: 64px;
1725
- --wm-wizard-stepper-body-padding: var(--wm-space-4);
1726
- --wm-wizard-stepper-body-font-family: var(--wm-body-medium-font-family);
1727
- --wm-wizard-stepper-body-font-size: var(--wm-body-medium-font-size);
1728
- --wm-wizard-stepper-body-font-weight: var(--wm-body-medium-font-weight);
1729
- --wm-wizard-stepper-body-line-height: var(--wm-body-medium-line-height);
1730
- --wm-wizard-stepper-body-letter-spacing: var(--wm-body-medium-letter-spacing);
1731
- --wm-wizard-stepper-body-color: var(--wm-color-on-background);
1732
- --wm-wizard-stepper-footer-padding: var(--wm-space-4);
1733
- --wm-wizard-stepper-footer-background: inherit;
1734
- --wm-wizard-stepper-footer-radius: var(--wm-radius-0) var(--wm-radius-0) inherit inherit;
1735
- --wm-wizard-stepper-footer-border: var(--wm-color-outline-variant);
1736
- --wm-wizard-stepper-footer-border-width: var(--wm-border-width);
1737
- --wm-wizard-stepper-footer-border-style: var(--wm-border-style);
1738
- --wm-wizard-stepper-footer-actions-gap: var(--wm-space-2);
1739
- /* number wizard variables */
1740
- --wm-wizard-number-stepper-step-active-background: var(--wm-color-primary);
1741
- --wm-wizard-number-stepper-step-current-background: var(--wm-color-primary);
1742
- --wm-wizard-number-stepper-step-disabled-background: var(--wm-btn-disabled-opacity);
1743
- /* vertical wizard variables */
1744
- --wm-wizard-vertical-heading-padding: var(--wm-space-6);
1745
- --wm-wizard-vertical-heading-border: var(--wm-color-outline-variant);
1746
- --wm-wizard-vertical-heading-border-style: var(--wm-border-style);
1747
- --wm-wizard-vertical-heading-border-width: var(--wm-border-width);
1748
- --wm-wizard-vertical-body-padding: var(--wm-space-6);
1749
- --wm-wizard-vertical-stepper-step-gap: var(--wm-space-11);
1750
- --wm-wizard-vertical-stepper-step-indicator-transform-x: var(--wm-space-4);
1751
- --wm-wizard-vertical-stepper-step-indicator-transform-y: 50%;
1752
- --wm-wizard-vertical-stepper-step-indicator-background-border: var(--wm-color-outline-variant);
1753
- --wm-wizard-vertical-stepper-step-indicator-border-width: var(--wm-border-width);
1754
- --wm-wizard-vertical-grid-columns: 4fr 10fr;
1755
- --wm-wizard-vertical-grid-gap: var(--wm-space-3);
1756
- --wm-wizard-vertical-stepper-step-disabled-background: var(--wm-btn-disabled-opacity);
1757
- /* icon wizard variables */
1758
- --wm-wizard-icon-stepper-step-icon-size: var(--wm-icon-size-sm);
1759
- --wm-wizard-icon-stepper-step-active-background: var(--wm-color-primary);
1760
- --wm-wizard-icon-stepper-step-current-background: var(--wm-color-primary);
1761
- --wm-wizard-icon-stepper-step-disabled-background: var(--wm-btn-disabled-opacity);
1762
- --wm-wizard-icon-stepper-inline-padding-top: var(--wm-space-10);
1763
- --wm-wizard-vertical-icon-stepper-inline-title-wrapper-gap: var(--wm-space-2);
1764
- --wm-wizard-vertical-icon-stepper-inline-padding: var(--wm-space-3);
1765
- /* dotted wizard variables */
1766
- --wm-wizard-dotted-stepper-inline-padding: var(--wm-space-6);
1767
- --wm-wizard-vertical-dotted-stepper-inline-padding: var(--wm-space-3);
1768
- --wm-wizard-dotted-stepper-step-width: 8px;
1769
- --wm-wizard-dotted-stepper-step-height: 8px;
1770
- --wm-wizard-dotted-stepper-step-indicator-gap: var(--wm-space-3);
1771
- --wm-wizard-dotted-stepper-step-indicator-border-height: 3px;
1772
- --wm-wizard-dotted-stepper-step-indicator-border: var(--wm-color-primary);
1773
- --wm-wizard-dotted-stepper-step-current-icon-size: var(--wm-icon-size-md);
1774
- --wm-wizard-dotted-stepper-step-current-icon-color: var(--wm-color-primary);
1775
- --wm-wizard-dotted-stepper-step-active-icon-size: var(--wm-icon-size-md);
1776
- --wm-wizard-dotted-stepper-step-active-icon-color: var(--wm-color-primary);
1777
- --wm-wizard-dotted-stepper-step-active-background: var(--wm-color-primary);
1778
- --wm-wizard-dotted-stepper-step-current-background: var(--wm-color-primary);
1779
- --wm-wizard-dotted-stepper-step-disabled-background: var(--wm-btn-disabled-opacity);
1780
- /* vertical dotted stepper variables */
1781
- --wm-wizard-vertical-dotted-stepper-step-height: 56px;
1782
- --wm-wizard-vertical-dotted-stepper-step-gap: 32px;
1783
- --wm-wizard-vertical-dotted-stepper-step-transform-x: var(--wm-space-1);
1784
- --wm-wizard-vertical-dotted-stepper-step-transform-y: 50%;
1785
- --wm-wizard-vertical-dotted-stepper-step-top-offset-default: calc(var(--wm-space-1) * -1);
1786
- --wm-wizard-vertical-dotted-stepper-step-top-offset-inline: var(--wm-space-1);
1787
- --wm-wizard-vertical-dotted-stepper-inline-title-wrapper-gap: var(--wm-space-2);
1788
- --wm-wizard-vertical-step-indicator-transform-x: var(--wm-space-4);
1789
- --wm-wizard-vertical-step-indicator-transform-y: 50%;
1790
- --wm-wizard-step-indicator-transform-y: var(--wm-space-4);
1791
- --wm-wizard-classic-wizard-stepper-steps-gap: var(--wm-space-2);
1792
- --wm-wizard-classic-wizard-title-wrapper-border-left: 17px;
1793
- --wm-wizard-classic-wizard-title-wrapper-border-top-size: 25px;
1794
- --wm-wizard-classic-wizard-title-border-white-color: var(--wm-color-on-primary);
1795
- --wm-wizard-classic-wizard-title-wrapper-border-bottom-size: 27px;
1796
- --wm-wizard-classic-wizard-title-wrapper-border-style: var(--wm-border-style);
1797
- --wm-wizard-classic-wizard-title-wrapper-border-radius: var(--wm-radius-xs);
1798
- --wm-wizard-classic-wizard-title-wrapper-background: var(--wm-color-surface-dim);
1799
- --wm-wizard-classic-wizard-title-wrapper-current-background: var(--wm-color-primary);
1800
- --wm-wizard-classic-wizard-title-wrapper-current-color: var(--wm-color-on-primary);
1801
- --wm-wizard-classic-wizard-title-wrapper-active-background: var(--wm-color-primary);
1802
- --wm-wizard-classic-wizard-title-wrapper-active-color: var(--wm-color-on-primary);
1803
- --wm-wizard-classic-wizard-title-wrapper-padding: var(--wm-space-4);
1804
- --wm-wizard-classic-wizard-step-title-disabled-color: var(--wm-btn-disabled-opacity);
1805
- --wm-wizard-classic-wizard-heading-padding: var(--wm-space-4);
1806
- --wm-app-wizard-vertical-gap: 42px;
1676
+ --wm-wizard-padding: var(--wm-space-1);
1677
+ --wm-wizard-gap: var(--wm-space-2);
1678
+ --wm-wizard-heading-background: var(--wm-color-surface-bright);
1679
+ --wm-wizard-heading-radius: var(--wm-wizard-radius) var(--wm-wizard-radius) var(--wm-radius-none) var(--wm-radius-none);
1680
+ --wm-wizard-heading-padding: var(--wm-space-7) var(--wm-space-0) var(--wm-space-7) var(--wm-space-7);
1681
+ --wm-wizard-step-gap: var(--wm-space-2);
1682
+ --wm-wizard-step-title-color: var(--wm-color-on-surface);
1683
+ --wm-wizard-step-title-font-family: var(--wm-label-large-font-family);
1684
+ --wm-wizard-step-title-font-weight: var(--wm-font-weight-semibold);
1685
+ --wm-wizard-step-title-font-size: var(--wm-label-large-font-size);
1686
+ --wm-wizard-step-title-line-height: var(--wm-label-large-line-height);
1687
+ --wm-wizard-step-title-letter-spacing: var(--wm-label-large-letter-spacing);
1688
+ --wm-wizard-step-description-color: var(--wm-color-on-surface-variant);
1689
+ --wm-wizard-step-description-font-family: var(--wm-label-medium-font-family);
1690
+ --wm-wizard-step-description-font-weight: var(--wm-font-weight-medium);
1691
+ --wm-wizard-step-description-font-size: var(--wm-label-medium-font-size);
1692
+ --wm-wizard-step-description-line-height: var(--wm-label-medium-line-height);
1693
+ --wm-wizard-step-description-letter-spacing: var(--wm-label-medium-letter-spacing);
1694
+ --wm-wizard-step-indicator-size: 33px;
1695
+ --wm-wizard-step-indicator-background: transparent;
1696
+ --wm-wizard-step-indicator-background-current: var(--wm-color-secondary);
1697
+ --wm-wizard-step-indicator-background-active: var(--wm-wizard-step-indicator-background-current);
1698
+ --wm-wizard-step-indicator-border-width: 1.5px;
1699
+ --wm-wizard-step-indicator-border-style: solid;
1700
+ --wm-wizard-step-indicator-border-color: var(--wm-color-outline);
1701
+ --wm-wizard-step-indicator-radius: var(--wm-radius-circle);
1702
+ --wm-wizard-step-count-color: var(--wm-wizard-step-title-color);
1703
+ --wm-wizard-step-count-color-current: var(--wm-color-on-secondary);
1704
+ --wm-wizard-step-count-color-active: var(--wm-wizard-step-count-color-current);
1705
+ --wm-wizard-step-count-font-family: var(--wm-wizard-step-title-font-family);
1706
+ --wm-wizard-step-count-font-weight: var(--wm-wizard-step-title-font-weight);
1707
+ --wm-wizard-step-count-font-size: var(--wm-wizard-step-title-font-size);
1708
+ --wm-wizard-step-count-line-height: var(--wm-wizard-step-title-line-height);
1709
+ --wm-wizard-step-count-letter-spacing: var(--wm-wizard-step-title-letter-spacing);
1710
+ --wm-wizard-step-icon-color: var(--wm-wizard-step-count-color);
1711
+ --wm-wizard-step-icon-color-current: var(--wm-wizard-step-count-color-current);
1712
+ --wm-wizard-step-icon-color-active: var(--wm-wizard-step-count-color-active);
1713
+ --wm-wizard-step-icon-size: var(--wm-icon-size-sm);
1714
+ --wm-wizard-step-connector-width: 1px;
1715
+ --wm-wizard-step-connector-style: solid;
1716
+ --wm-wizard-step-connector-color: var(--wm-color-outline-variant);
1717
+ --wm-wizard-step-dotted-size: 8px;
1718
+ --wm-wizard-vertical-heading-width: 200px;
1719
+ --wm-wizard-vertical-heading-radius: var(--wm-wizard-radius) var(--wm-radius-none) var(--wm-radius-none) var(--wm-wizard-radius);
1720
+ --wm-wizard-vertical-heading-padding: var(--wm-space-7) var(--wm-space-7) var(--wm-space-0) var(--wm-space-7);
1721
+ --wm-wizard-vertical-connector-height: 34px;
1807
1722
  /* rich text editor variables */
1808
1723
  --wm-note-editor-toolbar-border-style: var(--wm-border-style);
1809
1724
  --wm-note-editor-toolbar-border-width: var(--wm-border-width);
@@ -1923,16 +1838,24 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1923
1838
  --wm-note-editor-popover-content-min-width: 100px;
1924
1839
  --wm-note-editor-popover-content-min-height: 30px;
1925
1840
  --wm-note-editor-popover-content-padding: var(--wm-space-1) var(--wm-space-2);
1926
- /*headings*/
1927
- --wm-headings-color: var(--wm-color-on-surface);
1928
- /*page content*/
1929
- --wm-page-content-padding: 0;
1930
- --wm-page-content-background: var(--wm-color-surface-container-lowest);
1931
- /*--Icon--*/
1932
- --wm-icon-gap: var(--wm-space-1);
1933
- /*--Grid Layout--*/
1934
- --wm-grid-layout-row-gap: var(--wm-space-0);
1935
- --wm-grid-layout-column-padding: var(--wm-space-2);
1841
+ /*-common-*/
1842
+ /*--shadows(elevations)--*/
1843
+ --wm-shadow-1: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
1844
+ --wm-shadow-2: 0px 1px 2px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
1845
+ --wm-shadow-3: 0px 4px 8px 3px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
1846
+ --wm-shadow-4: 0px 6px 10px 4px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
1847
+ --wm-shadow-5: 0px 8px 12px 6px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
1848
+ --wm-shadow-addon-1: 0px 1px 3px 1px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
1849
+ --wm-shadow-addon-2: 0px 2px 6px 2px color-mix(in srgb, var(--wm-color-shadow), transparent 85%);
1850
+ --wm-shadow-addon-3: 0px 1px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
1851
+ --wm-shadow-addon-4: 0px 2px 3px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
1852
+ --wm-shadow-addon-5: 0px 4px 4px 0px color-mix(in srgb, var(--wm-color-shadow), transparent 70%);
1853
+ --wm-elevation-shadow-none: none;
1854
+ --wm-elevation-shadow-1: var(--wm-shadow-1),var(--wm-shadow-addon-1);
1855
+ --wm-elevation-shadow-2: var(--wm-shadow-2),var(--wm-shadow-addon-2);
1856
+ --wm-elevation-shadow-3: var(--wm-shadow-3),var(--wm-shadow-addon-3);
1857
+ --wm-elevation-shadow-4: var(--wm-shadow-4),var(--wm-shadow-addon-4);
1858
+ --wm-elevation-shadow-5: var(--wm-shadow-5),var(--wm-shadow-addon-5);
1936
1859
  --wm-scroll-bar-width: 6px;
1937
1860
  --wm-scroll-bar-height: 6px;
1938
1861
  --wm-scroll-bar-track-bg: var(--wm-color-surface-container-lowest);
@@ -1950,7 +1873,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1950
1873
  }
1951
1874
  .wm-app {
1952
1875
  /** Reuasble style selectors with arguments */
1953
- /* datepicker styles */
1876
+ /*--components--*/
1954
1877
  /**--Layout--**/
1955
1878
  font-family: var(--wm-app-font-family);
1956
1879
  font-size: var(--wm-app-font-size);
@@ -1970,23 +1893,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1970
1893
  /* pagination horizontal styles */
1971
1894
  /* Timepicker styles */
1972
1895
  /* toast styles */
1973
- /* wizard body styles */
1974
- /* wizard footer styles */
1975
- /* number wizard styles */
1976
- /* icon stepper */
1977
- /* icon stepper inline */
1978
- /* vertical wizard styles */
1979
- /* dotted wizard styles */
1980
- /* classic wizard styles */
1981
- /* vertical wizard styles */
1982
1896
  /*--bootstrap 5 utilities start--*/
1983
1897
  /* rtl:begin:remove */
1984
1898
  /*--bootstrap 5 utilities end--*/
1985
1899
  /**--WM Utilities--**/
1986
1900
  }
1987
- .wm-app * {
1988
- position: relative;
1989
- }
1990
1901
  .wm-app .sr-only {
1991
1902
  display: none;
1992
1903
  }
@@ -1999,6 +1910,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
1999
1910
  }
2000
1911
  .wm-app * {
2001
1912
  outline: 0 !important;
1913
+ position: relative;
2002
1914
  }
2003
1915
  .wm-app .sr-only {
2004
1916
  position: absolute;
@@ -4724,14 +4636,71 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
4724
4636
  }
4725
4637
  .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-title .accordion-toggle {
4726
4638
  width: 100%;
4727
- align-items: flex-start;
4639
+ align-items: center;
4728
4640
  justify-content: flex-start;
4641
+ gap: var(--wm-panel-heading-gap);
4642
+ color: var(--wm-panel-heading-color);
4643
+ }
4644
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-title .accordion-toggle div:has(.heading) {
4645
+ width: 100%;
4729
4646
  }
4730
- .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading > .panel-actions {
4647
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions {
4731
4648
  display: flex;
4732
4649
  align-items: center;
4733
4650
  gap: var(--wm-panel-actions-gap);
4734
- margin: calc(calc(var(--wm-panel-heading-padding) / 2)* -1);
4651
+ }
4652
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label {
4653
+ display: inline-flex;
4654
+ align-items: center;
4655
+ justify-content: center;
4656
+ min-width: 20px;
4657
+ min-height: var(--wm-badge-min-height);
4658
+ padding: var(--wm-badge-block-padding) var(--wm-badge-inline-padding);
4659
+ background: var(--wm-badge-background);
4660
+ color: var(--wm-badge-color);
4661
+ border-radius: var(--wm-badge-radius);
4662
+ font-family: var(--wm-badge-font-family);
4663
+ font-size: var(--wm-badge-font-size);
4664
+ font-weight: var(--wm-badge-font-weight);
4665
+ line-height: var(--wm-badge-line-height);
4666
+ letter-spacing: var(--wm-badge-letter-spacing);
4667
+ white-space: nowrap;
4668
+ }
4669
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label:empty {
4670
+ display: none;
4671
+ }
4672
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-default {
4673
+ --wm-badge-background: var(--wm-color-surface-container-highest);
4674
+ --wm-badge-color: var(--wm-color-on-surface);
4675
+ }
4676
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-primary {
4677
+ --wm-badge-background: var(--wm-color-primary);
4678
+ --wm-badge-color: var(--wm-color-on-primary);
4679
+ }
4680
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-secondary {
4681
+ --wm-badge-background: var(--wm-color-secondary);
4682
+ --wm-badge-color: var(--wm-color-on-secondary);
4683
+ }
4684
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-tertiary {
4685
+ --wm-badge-background: var(--wm-color-tertiary);
4686
+ --wm-badge-color: var(--wm-color-on-tertiary);
4687
+ }
4688
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-success {
4689
+ --wm-badge-background: var(--wm-color-success);
4690
+ --wm-badge-color: var(--wm-color-on-success);
4691
+ }
4692
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-info {
4693
+ --wm-badge-background: var(--wm-color-info);
4694
+ --wm-badge-color: var(--wm-color-on-info);
4695
+ }
4696
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-warning {
4697
+ --wm-badge-background: var(--wm-color-warning);
4698
+ --wm-badge-color: var(--wm-color-on-warning);
4699
+ }
4700
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-danger,
4701
+ .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-heading .panel-actions span.label-error {
4702
+ --wm-badge-background: var(--wm-color-error);
4703
+ --wm-badge-color: var(--wm-color-on-error);
4735
4704
  }
4736
4705
  .wm-app .app-accordion.panel-group > .app-accordion-panel > .panel-collapse.collapse:not(.in) {
4737
4706
  display: none;
@@ -4824,14 +4793,18 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
4824
4793
  min-width: 20px;
4825
4794
  min-height: var(--wm-badge-min-height);
4826
4795
  padding: var(--wm-badge-block-padding) var(--wm-badge-inline-padding);
4796
+ background: var(--wm-badge-background);
4797
+ color: var(--wm-badge-color);
4798
+ border-radius: var(--wm-badge-radius);
4799
+ font-family: var(--wm-badge-font-family);
4827
4800
  font-size: var(--wm-badge-font-size);
4828
4801
  font-weight: var(--wm-badge-font-weight);
4829
- font-family: var(--wm-badge-font-family);
4830
- color: var(--wm-badge-color);
4831
4802
  line-height: var(--wm-badge-line-height);
4803
+ letter-spacing: var(--wm-badge-letter-spacing);
4832
4804
  white-space: nowrap;
4833
- background: var(--wm-badge-background);
4834
- border-radius: var(--wm-badge-radius);
4805
+ }
4806
+ .wm-app .badge:empty {
4807
+ display: none;
4835
4808
  }
4836
4809
  .wm-app .app-badge {
4837
4810
  padding: var(--wm-space-0) var(--wm-space-1);
@@ -4842,51 +4815,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
4842
4815
  line-height: var(--wm-label-small-line-height);
4843
4816
  letter-spacing: var(--wm-label-small-letter-spacing);
4844
4817
  }
4845
- .wm-app .btn-primary .badge {
4846
- --wm-badge-color: var(--wm-badge-primary);
4847
- --wm-badge-background: var(--wm-badge-primary-background);
4848
- }
4849
- .wm-app .btn-info .badge {
4850
- --wm-badge-color: var(--wm-badge-info);
4851
- --wm-badge-background: var(--wm-badge-info-background);
4852
- }
4853
- .wm-app .btn-success .badge {
4854
- --wm-badge-color: var(--wm-badge-success);
4855
- --wm-badge-background: var(--wm-badge-success-background);
4856
- }
4857
- .wm-app .btn-warning .badge {
4858
- --wm-badge-color: var(--wm-badge-warning);
4859
- --wm-badge-background: var(--wm-badge-warning-background);
4860
- }
4861
- .wm-app .btn-danger .badge {
4862
- --wm-badge-color: var(--wm-badge-error);
4863
- --wm-badge-background: var(--wm-badge-error-background);
4864
- }
4865
- .wm-app .btn-secondary .badge {
4866
- --wm-badge-color: var(--wm-badge-secondary);
4867
- --wm-badge-background: var(--wm-badge-secondary-background);
4868
- }
4869
- .wm-app .btn-tertiary .badge {
4870
- --wm-badge-color: var(--wm-badge-tertiary);
4871
- --wm-badge-background: var(--wm-badge-tertiary-background);
4872
- }
4873
- .wm-app .btn .badge {
4874
- position: absolute;
4875
- right: -12px;
4876
- top: -8px;
4877
- z-index: 3;
4878
- }
4879
- .wm-app a:not(.btn) .badge {
4880
- position: absolute;
4881
- right: -100%;
4882
- top: -50%;
4883
- }
4884
- .wm-app .badge:empty {
4885
- display: none;
4886
- }
4887
- .wm-app .app-list-item.active .badge {
4888
- background: var(--wm-list-item-badge-background);
4889
- }
4890
4818
  .wm-app .app-breadcrumb {
4891
4819
  display: inline-flex;
4892
4820
  flex-wrap: wrap;
@@ -5067,6 +4995,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
5067
4995
  .wm-app .btn[icon-position="top"],
5068
4996
  .wm-app button[icon-position="top"] {
5069
4997
  flex-direction: column;
4998
+ padding-block: var(--wm-btn-gap);
5070
4999
  }
5071
5000
  .wm-app .btn[icon-position="top"]:has(.btn-caption:not(:empty)) .app-icon,
5072
5001
  .wm-app button[icon-position="top"]:has(.btn-caption:not(:empty)) .app-icon,
@@ -5074,6 +5003,48 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
5074
5003
  .wm-app button[icon-position="top"]:has(.anchor-caption:not(:empty)) .app-icon {
5075
5004
  margin: var(--wm-space-0);
5076
5005
  }
5006
+ .wm-app .btn .badge,
5007
+ .wm-app button .badge {
5008
+ position: absolute;
5009
+ right: -12px;
5010
+ top: -8px;
5011
+ z-index: 3;
5012
+ }
5013
+ .wm-app .btn:before,
5014
+ .wm-app button:before {
5015
+ content: "";
5016
+ top: 0;
5017
+ left: 0;
5018
+ right: 0;
5019
+ bottom: 0;
5020
+ position: absolute;
5021
+ pointer-events: none;
5022
+ border-radius: inherit;
5023
+ opacity: 0;
5024
+ background: var(--wm-btn-state-layer-color);
5025
+ }
5026
+ .wm-app .btn:hover::before,
5027
+ .wm-app button:hover::before,
5028
+ .wm-app .btn.hover::before,
5029
+ .wm-app button.hover::before {
5030
+ opacity: var(--wm-btn-state-layer-opacity-hover);
5031
+ }
5032
+ .wm-app .btn:focus::before,
5033
+ .wm-app button:focus::before,
5034
+ .wm-app .btn.focus::before,
5035
+ .wm-app button.focus::before {
5036
+ opacity: var(--wm-btn-state-layer-opacity-focus);
5037
+ }
5038
+ .wm-app .btn:active::before,
5039
+ .wm-app button:active::before,
5040
+ .wm-app .btn:active:focus::before,
5041
+ .wm-app button:active:focus::before,
5042
+ .wm-app .btn:active:hover::before,
5043
+ .wm-app button:active:hover::before,
5044
+ .wm-app .btn:active.focus::before,
5045
+ .wm-app button:active.focus::before {
5046
+ opacity: var(--wm-btn-state-layer-opacity-active);
5047
+ }
5077
5048
  .wm-app .btn-fab,
5078
5049
  .wm-app button-fab {
5079
5050
  min-width: auto;
@@ -5134,41 +5105,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
5134
5105
  .wm-app button-block + .btn.btn-block {
5135
5106
  margin-top: 0;
5136
5107
  }
5137
- .wm-app .btn:before,
5138
- .wm-app button:before {
5139
- content: "";
5140
- top: 0;
5141
- left: 0;
5142
- right: 0;
5143
- bottom: 0;
5144
- position: absolute;
5145
- pointer-events: none;
5146
- border-radius: inherit;
5147
- opacity: 0;
5148
- background: var(--wm-btn-state-layer-color);
5149
- }
5150
- .wm-app .btn:hover::before,
5151
- .wm-app button:hover::before,
5152
- .wm-app .btn.hover::before,
5153
- .wm-app button.hover::before {
5154
- opacity: var(--wm-btn-state-layer-opacity-hover);
5155
- }
5156
- .wm-app .btn:focus::before,
5157
- .wm-app button:focus::before,
5158
- .wm-app .btn.focus::before,
5159
- .wm-app button.focus::before {
5160
- opacity: var(--wm-btn-state-layer-opacity-focus);
5161
- }
5162
- .wm-app .btn:active::before,
5163
- .wm-app button:active::before,
5164
- .wm-app .btn:active:focus::before,
5165
- .wm-app button:active:focus::before,
5166
- .wm-app .btn:active:hover::before,
5167
- .wm-app button:active:hover::before,
5168
- .wm-app .btn:active.focus::before,
5169
- .wm-app button:active.focus::before {
5170
- opacity: var(--wm-btn-state-layer-opacity-active);
5171
- }
5172
5108
  .wm-app .btn-default,
5173
5109
  .wm-app button-default {
5174
5110
  --wm-btn-color: var(--wm-btn-default-color);
@@ -5326,11 +5262,12 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
5326
5262
  }
5327
5263
  .wm-app .btn-icon,
5328
5264
  .wm-app button-icon {
5265
+ min-width: var(--wm-btn-icon-md-width);
5329
5266
  width: var(--wm-btn-icon-md-width);
5330
5267
  height: var(--wm-btn-icon-md-height);
5331
5268
  min-height: var(--wm-btn-icon-md-height);
5332
5269
  margin: var(--wm-btn-icon-md-margin);
5333
- --wm-btn-padding: var(--wm-btn-icon-md-padding);
5270
+ padding: 0;
5334
5271
  --wm-btn-radius: var(--wm-btn-icon-md-radius);
5335
5272
  --wm-btn-icon-size: var(--wm-btn-icon-md-size);
5336
5273
  }
@@ -5491,9 +5428,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
5491
5428
  flex-direction: column;
5492
5429
  }
5493
5430
  .wm-app .app-panel > .panel-heading .panel-title .pull-left:empty,
5494
- .wm-app .panel > .panel-heading .panel-title .pull-left:empty {
5495
- display: none;
5496
- }
5431
+ .wm-app .panel > .panel-heading .panel-title .pull-left:empty,
5497
5432
  .wm-app .app-panel > .panel-heading .panel-title .pull-left:has(.panel-icon[hidden]),
5498
5433
  .wm-app .panel > .panel-heading .panel-title .pull-left:has(.panel-icon[hidden]) {
5499
5434
  display: none;
@@ -5571,52 +5506,51 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
5571
5506
  .wm-app .panel:has(> .panel-content[hidden] + .panel-footer[hidden]) > .panel-heading {
5572
5507
  border-radius: var(--wm-panel-radius);
5573
5508
  }
5509
+ .wm-app .app-panel.panel-default,
5510
+ .wm-app .panel.panel-default {
5511
+ --wm-panel-heading-background: var(--wm-color-surface-container);
5512
+ --wm-panel-heading-color: var(--wm-color-on-surface);
5513
+ }
5574
5514
  .wm-app .app-panel.panel-primary,
5575
5515
  .wm-app .panel.panel-primary {
5576
5516
  --wm-panel-heading-background: var(--wm-panel-background-primary);
5577
5517
  --wm-panel-heading-color: var(--wm-panel-heading-color-primary);
5578
- --wm-panel-description-color: var(--wm-panel-description-color-primary);
5579
5518
  }
5580
5519
  .wm-app .app-panel.panel-secondary,
5581
5520
  .wm-app .panel.panel-secondary {
5582
5521
  --wm-panel-heading-background: var(--wm-panel-background-secondary);
5583
5522
  --wm-panel-heading-color: var(--wm-panel-heading-color-secondary);
5584
- --wm-panel-description-color: var(--wm-panel-description-color-secondary);
5585
5523
  }
5586
5524
  .wm-app .app-panel.panel-tertiary,
5587
5525
  .wm-app .panel.panel-tertiary {
5588
5526
  --wm-panel-heading-background: var(--wm-panel-background-tertiary);
5589
5527
  --wm-panel-heading-color: var(--wm-panel-heading-color-tertiary);
5590
- --wm-panel-description-color: var(--wm-panel-description-color-tertiary);
5591
5528
  }
5592
5529
  .wm-app .app-panel.panel-success,
5593
5530
  .wm-app .panel.panel-success {
5594
5531
  --wm-panel-heading-background: var(--wm-panel-background-success);
5595
5532
  --wm-panel-heading-color: var(--wm-panel-heading-color-success);
5596
- --wm-panel-description-color: var(--wm-panel-description-color-success);
5597
5533
  }
5598
5534
  .wm-app .app-panel.panel-info,
5599
5535
  .wm-app .panel.panel-info {
5600
5536
  --wm-panel-heading-background: var(--wm-panel-background-info);
5601
5537
  --wm-panel-heading-color: var(--wm-panel-heading-color-info);
5602
- --wm-panel-description-color: var(--wm-panel-description-color-info);
5603
5538
  }
5604
5539
  .wm-app .app-panel.panel-warning,
5605
5540
  .wm-app .panel.panel-warning {
5606
5541
  --wm-panel-heading-background: var(--wm-panel-background-warning);
5607
5542
  --wm-panel-heading-color: var(--wm-panel-heading-color-warning);
5608
- --wm-panel-description-color: var(--wm-panel-description-color-warning);
5609
5543
  }
5610
5544
  .wm-app .app-panel.panel-danger,
5611
5545
  .wm-app .panel.panel-danger {
5612
5546
  --wm-panel-heading-background: var(--wm-panel-background-danger);
5613
5547
  --wm-panel-heading-color: var(--wm-panel-heading-color-danger);
5614
- --wm-panel-description-color: var(--wm-panel-description-color-danger);
5615
5548
  }
5616
5549
  .wm-app .app-livelist.list-card {
5617
5550
  background: none;
5618
5551
  border: none;
5619
5552
  box-shadow: none;
5553
+ border-radius: unset;
5620
5554
  }
5621
5555
  .wm-app .app-livelist.list-card .list-group {
5622
5556
  display: flex;
@@ -5632,15 +5566,23 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
5632
5566
  .wm-app .app-livelist.list-card .list-group .app-list-item:before {
5633
5567
  display: none;
5634
5568
  }
5569
+ .wm-app .app-livelist.list-card .list-group .app-list-item.active {
5570
+ --wm-card-background: var(--wm-card-background-active);
5571
+ --wm-card-filled-background: var(--wm-card-background);
5572
+ }
5635
5573
  .wm-app .app-livelist.list-card > .panel-heading {
5636
- padding: 0px;
5574
+ padding: unset;
5637
5575
  margin-bottom: var(--wm-panel-heading-padding);
5576
+ --wm-panel-heading-background: none;
5638
5577
  }
5639
5578
  .wm-app .app-livelist.list-card > .panel-footer {
5640
5579
  border: none;
5641
- padding: 0px;
5580
+ padding: unset;
5642
5581
  margin-top: var(--wm-panel-footer-padding);
5643
5582
  }
5583
+ .wm-app .app-livelist.list-card:has(.app-horizontal-list) {
5584
+ overflow: unset;
5585
+ }
5644
5586
  .wm-app .app-card {
5645
5587
  display: flex;
5646
5588
  flex-direction: column;
@@ -5712,6 +5654,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
5712
5654
  --wm-card-shadow: var(--wm-card-elevation-shadow-active);
5713
5655
  }
5714
5656
  .wm-app .app-card.card-filled {
5657
+ --wm-card-background: var(--wm-card-filled-background);
5715
5658
  --wm-card-border-width: var(--wm-card-filled-border-width);
5716
5659
  --wm-card-shadow: var(--wm-card-filled-shadow);
5717
5660
  }
@@ -6088,16 +6031,20 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6088
6031
  border-radius: 50%;
6089
6032
  z-index: 1;
6090
6033
  cursor: pointer;
6034
+ background: var(--wm-checkbox-state-layer-color);
6035
+ opacity: var(--wm-checkbox-state-layer-opacity);
6091
6036
  }
6092
6037
  .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:hover {
6093
- background: var(--wm-checkbox-state-hover);
6038
+ --wm-checkbox-state-layer-opacity: var(--wm-checkbox-state-layer-opacity-hover);
6094
6039
  }
6095
6040
  .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:focus {
6096
- background: var(--wm-checkbox-state-focus);
6097
- outline: 0 !important;
6041
+ --wm-checkbox-state-layer-opacity: var(--wm-checkbox-state-layer-opacity-focus);
6098
6042
  }
6099
6043
  .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:active {
6100
- background: var(--wm-checkbox-state-active);
6044
+ --wm-checkbox-state-layer-opacity: var(--wm-checkbox-state-layer-opacity-active);
6045
+ }
6046
+ .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked {
6047
+ --wm-checkbox-state-layer-color: var(--wm-checkbox-background-selected);
6101
6048
  }
6102
6049
  .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked + .caption:before {
6103
6050
  background: var(--wm-checkbox-background-selected);
@@ -6106,15 +6053,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6106
6053
  .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked + .caption:after {
6107
6054
  transform: translate(3px, 4px) rotate(-45deg) scale(1);
6108
6055
  }
6109
- .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked:hover {
6110
- background: var(--wm-checkbox-selected-state-hover);
6111
- }
6112
- .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked:focus {
6113
- background: var(--wm-checkbox-selected-state-focus);
6114
- }
6115
- .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked:active {
6116
- background: var(--wm-checkbox-selected-state-active);
6117
- }
6118
6056
  .wm-app .app-checkbox.checkbox > label .caption {
6119
6057
  display: inline-block;
6120
6058
  padding-left: calc(var(--wm-checkbox-state-layer-size) + var(--wm-checkbox-gap));
@@ -6154,43 +6092,31 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6154
6092
  --wm-checkbox-background-selected: var(--wm-color-secondary);
6155
6093
  --wm-checkbox-border-color-selected: var(--wm-color-secondary);
6156
6094
  --wm-checkbox-icon-color-selected: var(--wm-color-on-secondary);
6157
- --wm-checkbox-selected-state-hover: var(--wm-color-secondary-hover);
6158
- --wm-checkbox-selected-state-focus: var(--wm-color-secondary-focus);
6159
6095
  }
6160
6096
  .wm-app .app-checkbox.checkbox.tertiary {
6161
6097
  --wm-checkbox-background-selected: var(--wm-color-tertiary);
6162
6098
  --wm-checkbox-border-color-selected: var(--wm-color-tertiary);
6163
6099
  --wm-checkbox-icon-color-selected: var(--wm-color-on-tertiary);
6164
- --wm-checkbox-selected-state-hover: var(--wm-color-tertiary-hover);
6165
- --wm-checkbox-selected-state-focus: var(--wm-color-tertiary-focus);
6166
6100
  }
6167
6101
  .wm-app .app-checkbox.checkbox.success {
6168
6102
  --wm-checkbox-background-selected: var(--wm-color-success);
6169
6103
  --wm-checkbox-border-color-selected: var(--wm-color-success);
6170
6104
  --wm-checkbox-icon-color-selected: var(--wm-color-on-success);
6171
- --wm-checkbox-selected-state-hover: var(--wm-color-success-hover);
6172
- --wm-checkbox-selected-state-focus: var(--wm-color-success-focus);
6173
6105
  }
6174
6106
  .wm-app .app-checkbox.checkbox.info {
6175
6107
  --wm-checkbox-background-selected: var(--wm-color-info);
6176
6108
  --wm-checkbox-border-color-selected: var(--wm-color-info);
6177
6109
  --wm-checkbox-icon-color-selected: var(--wm-color-on-info);
6178
- --wm-checkbox-selected-state-hover: var(--wm-color-info-hover);
6179
- --wm-checkbox-selected-state-focus: var(--wm-color-info-focus);
6180
6110
  }
6181
6111
  .wm-app .app-checkbox.checkbox.warning {
6182
6112
  --wm-checkbox-background-selected: var(--wm-color-warning);
6183
6113
  --wm-checkbox-border-color-selected: var(--wm-color-warning);
6184
6114
  --wm-checkbox-icon-color-selected: var(--wm-color-on-warning);
6185
- --wm-checkbox-selected-state-hover: var(--wm-color-warning-hover);
6186
- --wm-checkbox-selected-state-focus: var(--wm-color-warning-focus);
6187
6115
  }
6188
6116
  .wm-app .app-checkbox.checkbox.error {
6189
6117
  --wm-checkbox-background-selected: var(--wm-color-error);
6190
6118
  --wm-checkbox-border-color-selected: var(--wm-color-error);
6191
6119
  --wm-checkbox-icon-color-selected: var(--wm-color-on-error);
6192
- --wm-checkbox-selected-state-hover: var(--wm-color-error-hover);
6193
- --wm-checkbox-selected-state-focus: var(--wm-color-error-focus);
6194
6120
  }
6195
6121
  .wm-app .app-checkboxset {
6196
6122
  padding: 0;
@@ -6254,6 +6180,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6254
6180
  position: relative;
6255
6181
  z-index: -1;
6256
6182
  }
6183
+ .wm-app .app-colorpicker.input-group .input-group-addon.colorpicker-container .colored-box[style] {
6184
+ box-shadow: var(--wm-shadow-addon-1);
6185
+ }
6257
6186
  .wm-app .app-colorpicker .color-picker {
6258
6187
  position: absolute;
6259
6188
  }
@@ -6269,6 +6198,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6269
6198
  border-radius: var(--wm-chips-list-border-radius);
6270
6199
  min-height: var(--wm-chips-list-height);
6271
6200
  }
6201
+ .wm-app .app-chips .chip-item {
6202
+ max-width: 100%;
6203
+ }
6272
6204
  .wm-app .app-chips .chip-item.active {
6273
6205
  --wm-chip-item-background: var(--wm-chip-item-background-selected);
6274
6206
  --wm-chip-item-border-color: var(--wm-chip-item-border-color-selected);
@@ -6311,6 +6243,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6311
6243
  pointer-events: none;
6312
6244
  }
6313
6245
  .wm-app .app-chip {
6246
+ max-width: 100%;
6314
6247
  display: inline-flex;
6315
6248
  justify-content: center;
6316
6249
  align-items: center;
@@ -6351,6 +6284,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6351
6284
  .wm-app .app-chip:active:focus:before {
6352
6285
  opacity: var(--wm-chip-item-layer-opacity-active);
6353
6286
  }
6287
+ .wm-app .app-chip .app-chip-title {
6288
+ white-space: nowrap;
6289
+ overflow: hidden;
6290
+ text-overflow: ellipsis;
6291
+ }
6354
6292
  .wm-app .app-chip > .btn {
6355
6293
  width: auto;
6356
6294
  padding: var(--wm-space-0);
@@ -6457,28 +6395,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6457
6395
  background: var(--wm-color-surface);
6458
6396
  z-index: -1;
6459
6397
  }
6460
- .wm-app .app-composite-widget.caption-floating:has(.app-currency) .control-label {
6461
- padding: 2px 4px;
6462
- top: -10px;
6463
- left: calc(var(--wm-form-control-padding) - 4px);
6398
+ .wm-app .app-composite-widget.caption-floating:not(.float-active):has(.app-currency) .control-label {
6464
6399
  width: auto;
6465
- height: auto;
6466
- --wm-caption-font-family: var(--wm-body-small-font-family);
6467
- --wm-caption-font-size: var(--wm-body-small-font-size);
6468
- --wm-caption-font-weight: var(--wm-body-small-font-weight);
6469
- --wm-caption-line-height: var(--wm-body-small-line-height);
6470
- --wm-caption-letter-spacing: var(--wm-body-small-letter-spacing);
6471
- transform: none;
6472
- }
6473
- .wm-app .app-composite-widget.caption-floating:has(.app-currency) .control-label:before {
6474
- content: "";
6475
- position: absolute;
6476
- left: 0;
6477
- top: 0;
6478
- width: 100%;
6479
- height: 100%;
6480
- background: var(--wm-color-surface);
6481
- z-index: -1;
6400
+ max-width: calc(100% - var(--wm-form-control-padding) - var(--wm-currency-inputgroup-addon-width));
6401
+ left: calc(var(--wm-currency-inputgroup-addon-width) + var(--wm-form-control-border-width));
6482
6402
  }
6483
6403
  .wm-app .control-label {
6484
6404
  font-family: var(--wm-caption-font-family);
@@ -6538,12 +6458,19 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6538
6458
  border-color: var(--wm-form-control-border-color-focus);
6539
6459
  box-shadow: inset 0 0 0 calc(var(--wm-form-control-border-width-focus) - var(--wm-form-control-border-width)) var(--wm-form-control-border-color-focus);
6540
6460
  }
6461
+ .wm-app .form-control[multiple] {
6462
+ height: calc(var(--wm-form-control-height) + var(--wm-form-control-line-height) + 2px);
6463
+ }
6541
6464
  .wm-app .app-input-wrapper {
6542
6465
  display: flex;
6543
6466
  flex-direction: column;
6544
6467
  }
6468
+ .wm-app .input-group {
6469
+ width: 100%;
6470
+ }
6545
6471
  .wm-app .input-group:not(.app-currency) {
6546
6472
  position: relative;
6473
+ width: 100%;
6547
6474
  }
6548
6475
  .wm-app .input-group:not(.app-currency) .input-group-btn,
6549
6476
  .wm-app .input-group:not(.app-currency) .input-group-addon,
@@ -6644,6 +6571,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6644
6571
  position: absolute;
6645
6572
  top: 1px;
6646
6573
  left: 1px;
6574
+ z-index: 1;
6647
6575
  display: inline-flex;
6648
6576
  align-items: center;
6649
6577
  justify-content: center;
@@ -6676,7 +6604,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6676
6604
  --wm-form-control-padding: var(--wm-space-2);
6677
6605
  }
6678
6606
  .wm-app .app-grid > .app-datagrid > .form-search {
6679
- display: flex;
6607
+ display: inline-flex;
6680
6608
  padding: 0 var(--wm-panel-content-padding);
6681
6609
  margin-bottom: var(--wm-panel-content-padding);
6682
6610
  }
@@ -6686,6 +6614,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6686
6614
  .wm-app .app-grid > .app-datagrid > .form-search .form-control.app-textbox {
6687
6615
  border-top-right-radius: 0;
6688
6616
  border-bottom-right-radius: 0;
6617
+ min-width: 180px;
6689
6618
  }
6690
6619
  .wm-app .app-grid > .app-datagrid > .form-search .form-control.app-select {
6691
6620
  border-top-left-radius: 0;
@@ -6702,16 +6631,33 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6702
6631
  .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner {
6703
6632
  height: 100%;
6704
6633
  width: 100%;
6705
- overflow: auto;
6706
6634
  }
6707
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table {
6635
+ .wm-app .app-grid > .app-datagrid .table-container .overlay {
6636
+ width: 100%;
6637
+ height: 100%;
6638
+ display: flex;
6639
+ justify-content: center;
6640
+ align-items: center;
6641
+ position: absolute;
6642
+ inset: 0;
6643
+ z-index: 1;
6644
+ background: color-mix(in srgb, var(--wm-data-table-overlay-background), transparent calc(100% - var(--wm-data-table-overlay-opacity)));
6645
+ color: var(--wm-data-table-overlay-color);
6646
+ }
6647
+ .wm-app .app-grid > .app-datagrid .table-container .overlay .status {
6648
+ display: inline-flex;
6649
+ justify-content: center;
6650
+ align-items: center;
6651
+ gap: var(--wm-space-1);
6652
+ }
6653
+ .wm-app .app-grid .table {
6708
6654
  width: 100%;
6709
6655
  display: table;
6710
6656
  table-layout: fixed;
6711
6657
  border-collapse: var(--wm-data-table-border-collapse);
6712
6658
  border-spacing: var(--wm-data-table-border-spacing);
6713
6659
  }
6714
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr {
6660
+ .wm-app .app-grid .table > thead tr {
6715
6661
  font-family: var(--wm-data-table-thead-tr-font-family);
6716
6662
  font-weight: var(--wm-data-table-thead-tr-font-weight);
6717
6663
  font-size: var(--wm-data-table-thead-tr-font-size);
@@ -6720,37 +6666,42 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6720
6666
  color: var(--wm-data-table-thead-tr-color);
6721
6667
  background: var(--wm-data-table-thead-tr-background);
6722
6668
  }
6723
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th {
6669
+ .wm-app .app-grid .table > thead tr th {
6724
6670
  border-bottom: var(--wm-data-table-thead-th-border-width) var(--wm-data-table-thead-th-border-style) var(--wm-data-table-thead-th-border-color);
6725
6671
  padding: var(--wm-data-table-thead-th-padding);
6726
- overflow: hidden;
6727
6672
  }
6728
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .header-data {
6673
+ .wm-app .app-grid .table > thead tr th .header-data {
6729
6674
  width: 100%;
6730
6675
  display: inline-flex;
6731
6676
  overflow: hidden;
6677
+ word-break: break-word;
6732
6678
  }
6733
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th:has(input) span.header-data {
6679
+ .wm-app .app-grid .table > thead tr th:has(input) span.header-data {
6734
6680
  display: none;
6735
6681
  }
6736
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container {
6682
+ .wm-app .app-grid .table > thead tr th .sort-buttons-container {
6737
6683
  display: inline-flex;
6738
6684
  align-items: center;
6739
6685
  justify-content: center;
6740
6686
  position: absolute;
6741
6687
  top: calc(50% - 7px);
6742
- right: 2px;
6688
+ right: var(--wm-space-2);
6743
6689
  }
6744
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon {
6690
+ .wm-app .app-grid .table > thead tr th .sort-buttons-container .sort-icon {
6745
6691
  position: relative;
6746
6692
  display: inline-flex;
6747
6693
  flex-direction: column;
6748
6694
  align-items: center;
6749
6695
  justify-content: center;
6750
6696
  gap: 2px;
6697
+ font-size: var(--wm-data-table-sort-icon-size);
6698
+ min-width: auto;
6699
+ width: auto;
6700
+ height: auto;
6701
+ color: var(--wm-data-table-sort-icon-color);
6751
6702
  }
6752
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon:before,
6753
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon:after {
6703
+ .wm-app .app-grid .table > thead tr th .sort-buttons-container .sort-icon:before,
6704
+ .wm-app .app-grid .table > thead tr th .sort-buttons-container .sort-icon:after {
6754
6705
  content: "\f0de";
6755
6706
  font-family: FontAwesome;
6756
6707
  font-style: normal;
@@ -6762,27 +6713,32 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6762
6713
  width: 10px;
6763
6714
  overflow: hidden;
6764
6715
  }
6765
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon:after {
6716
+ .wm-app .app-grid .table > thead tr th .sort-buttons-container .sort-icon:after {
6766
6717
  content: "\f0dd";
6767
6718
  }
6768
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon.asc:before {
6719
+ .wm-app .app-grid .table > thead tr th .sort-buttons-container .sort-icon.asc:before {
6769
6720
  opacity: 1;
6770
6721
  }
6771
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .sort-buttons-container .sort-icon.desc:after {
6722
+ .wm-app .app-grid .table > thead tr th .sort-buttons-container .sort-icon.desc:after {
6772
6723
  opacity: 1;
6773
6724
  }
6774
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th > .input-group .input-group-btn {
6725
+ .wm-app .app-grid .table > thead tr th:has(.sort-buttons-container) {
6726
+ padding-right: calc(var(--wm-data-table-thead-th-padding) + 10px);
6727
+ }
6728
+ .wm-app .app-grid .table > thead tr th > .input-group .input-group-btn {
6775
6729
  right: calc(var(--wm-input-group-btn-width) + var(--wm-btn-icon-md-margin));
6776
6730
  }
6777
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead tr th .ui-resizable-e {
6731
+ .wm-app .app-grid .table > thead tr th .ui-resizable-e {
6778
6732
  position: absolute;
6733
+ right: 0;
6734
+ cursor: col-resize;
6779
6735
  }
6780
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > thead.thead-sticky {
6736
+ .wm-app .app-grid .table > thead.thead-sticky {
6781
6737
  z-index: 1;
6782
6738
  position: sticky;
6783
6739
  top: 0;
6784
6740
  }
6785
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr {
6741
+ .wm-app .app-grid .table > tbody > tr {
6786
6742
  font-family: var(--wm-data-table-tbody-tr-font-family);
6787
6743
  font-weight: var(--wm-data-table-tbody-tr-font-weight);
6788
6744
  font-size: var(--wm-data-table-tbody-tr-font-size);
@@ -6791,41 +6747,51 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6791
6747
  color: var(--wm-data-table-tbody-tr-color);
6792
6748
  background: var(--wm-table-tr-hover-background);
6793
6749
  }
6794
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr td {
6750
+ .wm-app .app-grid .table > tbody > tr td {
6795
6751
  border-bottom: var(--wm-data-table-tbody-td-border-width) var(--wm-data-table-tbody-td-border-style) var(--wm-data-table-tbody-td-border-color);
6796
6752
  padding: var(--wm-data-table-tbody-td-padding);
6797
- overflow: hidden;
6753
+ vertical-align: middle;
6798
6754
  }
6799
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr:hover {
6755
+ .wm-app .app-grid .table > tbody > tr:hover {
6800
6756
  background: var(--wm-table-tr-hover-background);
6801
6757
  }
6802
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr.active {
6758
+ .wm-app .app-grid .table > tbody > tr.active {
6803
6759
  background: var(--wm-table-tr-active-background);
6804
6760
  }
6805
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table > tbody > tr:last-child td {
6761
+ .wm-app .app-grid .table > tbody > tr:last-child td {
6806
6762
  border: none;
6807
6763
  }
6808
- .wm-app .app-grid > .app-datagrid .table-container > .app-grid-header .app-grid-header-inner .table.table-condensed {
6764
+ .wm-app .app-grid .table.table-condensed {
6809
6765
  --wm-data-table-thead-th-padding: var(--wm-data-table-padding-condensed);
6810
6766
  --wm-data-table-tbody-td-padding: var(--wm-data-table-padding-condensed);
6811
6767
  }
6812
- .wm-app .app-grid > .app-datagrid .table-container .overlay {
6813
- width: 100%;
6814
- height: 100%;
6768
+ .wm-app .app-grid[multiselect="true"] .table tr th:first-child,
6769
+ .wm-app .app-grid[radioselect="true"] .table tr th:first-child,
6770
+ .wm-app .app-grid[multiselect="true"] .table tr td:first-child,
6771
+ .wm-app .app-grid[radioselect="true"] .table tr td:first-child {
6772
+ padding: 0;
6773
+ }
6774
+ .wm-app .app-grid[multiselect="true"] .table tr th:first-child > .app-checkbox,
6775
+ .wm-app .app-grid[radioselect="true"] .table tr th:first-child > .app-checkbox,
6776
+ .wm-app .app-grid[multiselect="true"] .table tr td:first-child > .app-checkbox,
6777
+ .wm-app .app-grid[radioselect="true"] .table tr td:first-child > .app-checkbox,
6778
+ .wm-app .app-grid[multiselect="true"] .table tr th:first-child > .app-radio,
6779
+ .wm-app .app-grid[radioselect="true"] .table tr th:first-child > .app-radio,
6780
+ .wm-app .app-grid[multiselect="true"] .table tr td:first-child > .app-radio,
6781
+ .wm-app .app-grid[radioselect="true"] .table tr td:first-child > .app-radio {
6815
6782
  display: flex;
6816
6783
  justify-content: center;
6817
- align-items: center;
6818
- position: absolute;
6819
- inset: 0;
6820
- z-index: 1;
6821
- background: color-mix(in srgb, var(--wm-data-table-overlay-background), transparent calc(100% - var(--wm-data-table-overlay-opacity)));
6822
- color: var(--wm-data-table-overlay-color);
6784
+ width: 100%;
6823
6785
  }
6824
- .wm-app .app-grid > .app-datagrid .table-container .overlay .status {
6825
- display: inline-flex;
6826
- justify-content: center;
6827
- align-items: center;
6828
- gap: var(--wm-space-1);
6786
+ .wm-app .app-grid[multiselect="true"] .table tr th:first-child > .app-checkbox > label,
6787
+ .wm-app .app-grid[radioselect="true"] .table tr th:first-child > .app-checkbox > label,
6788
+ .wm-app .app-grid[multiselect="true"] .table tr td:first-child > .app-checkbox > label,
6789
+ .wm-app .app-grid[radioselect="true"] .table tr td:first-child > .app-checkbox > label,
6790
+ .wm-app .app-grid[multiselect="true"] .table tr th:first-child > .app-radio > label,
6791
+ .wm-app .app-grid[radioselect="true"] .table tr th:first-child > .app-radio > label,
6792
+ .wm-app .app-grid[multiselect="true"] .table tr td:first-child > .app-radio > label,
6793
+ .wm-app .app-grid[radioselect="true"] .table tr td:first-child > .app-radio > label {
6794
+ width: var(--wm-radiobutton-state-layer-size);
6829
6795
  }
6830
6796
  .wm-app bs-datepicker-container {
6831
6797
  z-index: 1060;
@@ -6957,17 +6923,17 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
6957
6923
  opacity: var(--wm-datepicker-date-state-layer-opacity-active);
6958
6924
  }
6959
6925
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span.current-date.text-info:not(.selected) {
6960
- --wm-datepicker-date-color: var(--wm-btn-primary-background);
6961
- --wm-datepicker-date-border-color: var(--wm-btn-primary-border-color);
6926
+ --wm-datepicker-date-color: var(--wm-btn-secondary-background);
6927
+ --wm-datepicker-date-border-color: var(--wm-btn-secondary-border-color);
6962
6928
  }
6963
6929
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span.current-date.text-info:not(.selected).disabled {
6964
6930
  opacity: 0.38;
6965
6931
  }
6966
6932
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span.selected {
6967
- --wm-datepicker-date-color: var(--wm-btn-primary-color);
6968
- --wm-datepicker-date-background: var(--wm-btn-primary-background);
6969
- --wm-datepicker-date-border-color: var(--wm-btn-primary-border-color);
6970
- --wm-datepicker-date-state-layer-color: var(--wm-btn-primary-state-layer-color);
6933
+ --wm-datepicker-date-color: var(--wm-btn-secondary-color);
6934
+ --wm-datepicker-date-background: var(--wm-btn-secondary-background);
6935
+ --wm-datepicker-date-border-color: var(--wm-btn-secondary-border-color);
6936
+ --wm-datepicker-date-state-layer-color: var(--wm-btn-secondary-state-layer-color);
6971
6937
  }
6972
6938
  .wm-app bs-datepicker-container .bs-datepicker .bs-datepicker-body table td span.disabled {
6973
6939
  opacity: 0.38;
@@ -7021,7 +6987,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
7021
6987
  }
7022
6988
  .wm-app .dropdown .btn:has(> .caret),
7023
6989
  .wm-app .dropdown a:has(> .caret) {
7024
- padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2) !important;
6990
+ padding-right: calc(var(--wm-dropdown-menu-caret-size) * 2);
6991
+ width: 100%;
7025
6992
  }
7026
6993
  .wm-app .dropdown:not(.open) > .btn .caret {
7027
6994
  transform: rotate(0deg);
@@ -7303,7 +7270,12 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
7303
7270
  .wm-app .app-form > .form-body > .form-elements,
7304
7271
  .wm-app .app-liveform > .form-body > .form-elements,
7305
7272
  .wm-app .app-livefilter > .form-body > .form-elements {
7306
- margin: var(--wm-space-0) calc(var(--wm-grid-layout-column-padding) * -0.75);
7273
+ margin: var(--wm-space-0) calc(var(--wm-grid-layout-column-padding) * -1);
7274
+ }
7275
+ .wm-app .app-form > .form-body > .form-elements > .app-grid-layout,
7276
+ .wm-app .app-liveform > .form-body > .form-elements > .app-grid-layout,
7277
+ .wm-app .app-livefilter > .form-body > .form-elements > .app-grid-layout {
7278
+ padding: 0;
7307
7279
  }
7308
7280
  .wm-app .app-form > .form-body > .form-action,
7309
7281
  .wm-app .app-liveform > .form-body > .form-action,
@@ -7354,6 +7326,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
7354
7326
  gap: var(--wm-icon-gap);
7355
7327
  font-style: normal;
7356
7328
  }
7329
+ .wm-app .app-icon i,
7330
+ .wm-app .app-icon-wrapper i {
7331
+ font-style: normal;
7332
+ }
7357
7333
  .wm-app .app-icon-wrapper {
7358
7334
  white-space: nowrap;
7359
7335
  max-width: 100%;
@@ -7368,14 +7344,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
7368
7344
  .wm-app .app-icon-wrapper[icon-position="right"] {
7369
7345
  flex-direction: row-reverse;
7370
7346
  }
7371
- .wm-app .fa:not(.fa-lg,.fa-2x,.fa-3x,.fa-4x,.fa-5x,.wm-icon-preview,.property-icon-preview,.drag-handle,.toggle-hidden-items-icon,.wm-edit),
7372
- .wm-app .fa-stack:not(.fa-lg,.fa-2x,.fa-3x,.fa-4x,.fa-5x,.wm-icon-preview,.property-icon-preview,.drag-handle,.toggle-hidden-items-icon,.wm-edit),
7373
- .wm-app .wi:not(.fa-lg,.fa-2x,.fa-3x,.fa-4x,.fa-5x,.wm-icon-preview,.property-icon-preview,.drag-handle,.toggle-hidden-items-icon,.wm-edit),
7374
- .wm-app .wm-sl-l:not(.fa-lg,.fa-2x,.fa-3x,.fa-4x,.fa-5x,.wm-icon-preview,.property-icon-preview,.drag-handle,.toggle-hidden-items-icon,.wm-edit),
7375
- .wm-app .wm-sl-r:not(.fa-lg,.fa-2x,.fa-3x,.fa-4x,.fa-5x,.wm-icon-preview,.property-icon-preview,.drag-handle,.toggle-hidden-items-icon,.wm-edit),
7376
- .wm-app .mi:not(.fa-lg,.fa-2x,.fa-3x,.fa-4x,.fa-5x,.wm-icon-preview,.property-icon-preview,.drag-handle,.toggle-hidden-items-icon,.wm-edit),
7377
- .wm-app [class^="note-icon-"]:not(.fa-lg,.fa-2x,.fa-3x,.fa-4x,.fa-5x,.wm-icon-preview,.property-icon-preview,.drag-handle,.toggle-hidden-items-icon,.wm-edit),
7378
- .wm-app [class*=" note-icon-"]:not(.fa-lg,.fa-2x,.fa-3x,.fa-4x,.fa-5x,.wm-icon-preview,.property-icon-preview,.drag-handle,.toggle-hidden-items-icon,.wm-edit) {
7347
+ .wm-app .fa,
7348
+ .wm-app .fa-stack,
7349
+ .wm-app .wi,
7350
+ .wm-app .wm-sl-l,
7351
+ .wm-app .wm-sl-r,
7352
+ .wm-app .mi,
7353
+ .wm-app [class^="note-icon-"],
7354
+ .wm-app [class*=" note-icon-"] {
7379
7355
  font-size: var(--wm-icon-size);
7380
7356
  min-width: var(--wm-icon-size);
7381
7357
  width: var(--wm-icon-size);
@@ -7929,9 +7905,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
7929
7905
  .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
7930
7906
  margin-left: calc(var(--wm-space-2) * -1);
7931
7907
  }
7932
- .wm-app .app-nav.nav .app-nav-item > .app-anchor,
7933
- .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor,
7934
- .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor {
7908
+ .wm-app .app-nav.nav .app-nav-item > .app-anchor:not(.btn),
7909
+ .wm-app .app-nav.nav .app-nav-item > .app-menu > .app-anchor:not(.btn),
7910
+ .wm-app .app-nav.nav .app-nav-item > .app-popover-wrapper > .app-anchor:not(.btn) {
7935
7911
  background: var(--wm-nav-item-background);
7936
7912
  color: var(--wm-nav-item-color);
7937
7913
  }
@@ -8106,6 +8082,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8106
8082
  .wm-app .app-page.app-nav-full .app-content .app-content-row {
8107
8083
  flex-direction: column;
8108
8084
  }
8085
+ .wm-app .app-page.app-nav-full .app-content .app-content-row .app-page-content-wrapper {
8086
+ height: 100%;
8087
+ display: flex;
8088
+ flex-direction: row;
8089
+ }
8109
8090
  .wm-app .app-page.app-nav-full .app-content .app-content-row .app-page-content {
8110
8091
  width: 100%;
8111
8092
  }
@@ -8122,15 +8103,16 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8122
8103
  }
8123
8104
  .wm-app .app-header,
8124
8105
  .wm-app .app-mobile-header {
8125
- position: relative;
8126
8106
  width: 100%;
8107
+ display: flex;
8108
+ align-items: center;
8127
8109
  background: var(--wm-header-background);
8128
8110
  color: var(--wm-header-color);
8129
8111
  min-height: var(--wm-header-height);
8130
8112
  z-index: var(--wm-header-zindex);
8131
- box-shadow: var(--wm-header-shadow);
8132
- border-bottom: var(--wm-header-border);
8133
8113
  padding: var(--wm-header-padding);
8114
+ border-bottom: var(--wm-header-border);
8115
+ box-shadow: var(--wm-header-shadow);
8134
8116
  }
8135
8117
  .wm-app .app-header .app-header-menu,
8136
8118
  .wm-app .app-mobile-header .app-header-menu {
@@ -8138,8 +8120,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8138
8120
  }
8139
8121
  .wm-app .app-header .app-header-container,
8140
8122
  .wm-app .app-mobile-header .app-header-container {
8141
- position: relative;
8142
- height: 100%;
8123
+ width: 100%;
8143
8124
  }
8144
8125
  .wm-app .app-header .app-header-container .app-picture[name="AppLogo"],
8145
8126
  .wm-app .app-mobile-header .app-header-container .app-picture[name="AppLogo"] {
@@ -8163,6 +8144,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8163
8144
  .wm-app .app-mobile-header .app-search.input-group .form-control-feedback.back-btn {
8164
8145
  left: calc(var(--wm-btn-icon-md-margin)* 2);
8165
8146
  }
8147
+ .wm-app .app-header .app-grid-layout,
8148
+ .wm-app .app-mobile-header .app-grid-layout {
8149
+ --wm-grid-layout-column-padding: var(--wm-space-0);
8150
+ }
8166
8151
  .wm-app .app-content {
8167
8152
  flex-grow: 1;
8168
8153
  display: flex;
@@ -8182,34 +8167,40 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8182
8167
  }
8183
8168
  .wm-app .app-left-panel,
8184
8169
  .wm-app .app-right-panel {
8170
+ width: auto;
8171
+ height: auto;
8172
+ }
8173
+ .wm-app .app-left-panel.app-nav-drawer,
8174
+ .wm-app .app-right-panel.app-nav-drawer {
8185
8175
  min-width: var(--wm-aside-panel-width);
8186
8176
  width: var(--wm-aside-panel-width);
8187
8177
  background: var(--wm-aside-panel-background);
8188
8178
  color: var(--wm-aside-panel-color);
8179
+ border-right: var(--wm-aside-panel-border);
8189
8180
  box-shadow: var(--wm-aside-panel-shadow);
8190
8181
  padding-top: var(--wm-aside-panel-padding-top);
8191
8182
  padding-right: var(--wm-aside-panel-padding-right);
8192
8183
  padding-bottom: var(--wm-aside-panel-padding-bottom);
8193
8184
  padding-left: var(--wm-aside-panel-padding-left);
8194
8185
  }
8195
- .wm-app .app-left-panel .app-nav,
8196
- .wm-app .app-right-panel .app-nav {
8186
+ .wm-app .app-left-panel.app-nav-drawer .app-nav,
8187
+ .wm-app .app-right-panel.app-nav-drawer .app-nav {
8197
8188
  padding: var(--wm-aside-nav-padding);
8198
8189
  background: var(--wm-aside-nav-background);
8199
8190
  gap: var(--wm-aside-nav-gap);
8200
8191
  }
8201
- .wm-app .app-left-panel .app-nav .app-nav-item,
8202
- .wm-app .app-right-panel .app-nav .app-nav-item {
8192
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item,
8193
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item {
8203
8194
  width: 100%;
8204
8195
  }
8205
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor,
8206
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor,
8207
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor,
8208
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor,
8209
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-button,
8210
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-button,
8211
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
8212
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
8196
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor,
8197
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor,
8198
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor,
8199
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor,
8200
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-button,
8201
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-button,
8202
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
8203
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
8213
8204
  position: relative;
8214
8205
  display: flex;
8215
8206
  justify-content: flex-start;
@@ -8224,14 +8215,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8224
8215
  border-radius: var(--wm-aside-nav-item-radius);
8225
8216
  gap: var(--wm-aside-nav-item-gap);
8226
8217
  }
8227
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor .app-icon,
8228
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor .app-icon,
8229
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor .app-icon,
8230
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor .app-icon,
8231
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-button .app-icon,
8232
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-button .app-icon,
8233
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon,
8234
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
8218
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor .app-icon,
8219
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor .app-icon,
8220
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor .app-icon,
8221
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor .app-icon,
8222
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-button .app-icon,
8223
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-button .app-icon,
8224
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon,
8225
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
8235
8226
  font-size: var(--wm-aside-nav-item-icon-size);
8236
8227
  min-width: var(--wm-aside-nav-item-icon-width);
8237
8228
  width: var(--wm-aside-nav-item-icon-width);
@@ -8241,150 +8232,192 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8241
8232
  background: var(--wm-aside-nav-item-icon-background);
8242
8233
  color: var(--wm-aside-nav-item-icon-color);
8243
8234
  }
8244
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor > .anchor-caption,
8245
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor > .anchor-caption,
8246
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor > .anchor-caption,
8247
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor > .anchor-caption,
8248
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-button > .anchor-caption,
8249
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-button > .anchor-caption,
8250
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .anchor-caption,
8251
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .anchor-caption,
8252
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor > .btn-caption,
8253
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor > .btn-caption,
8254
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor > .btn-caption,
8255
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor > .btn-caption,
8256
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-button > .btn-caption,
8257
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-button > .btn-caption,
8258
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .btn-caption,
8259
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .btn-caption {
8235
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor > .anchor-caption,
8236
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor > .anchor-caption,
8237
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor > .anchor-caption,
8238
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor > .anchor-caption,
8239
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-button > .anchor-caption,
8240
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-button > .anchor-caption,
8241
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .anchor-caption,
8242
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .anchor-caption,
8243
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor > .btn-caption,
8244
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor > .btn-caption,
8245
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor > .btn-caption,
8246
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor > .btn-caption,
8247
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-button > .btn-caption,
8248
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-button > .btn-caption,
8249
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .btn-caption,
8250
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .btn-caption {
8260
8251
  width: 100%;
8261
8252
  white-space: nowrap;
8262
8253
  overflow: hidden;
8263
8254
  text-overflow: ellipsis;
8264
8255
  text-align: left;
8265
8256
  }
8266
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor,
8267
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor,
8268
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor,
8269
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor,
8270
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
8271
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
8257
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor > .caret,
8258
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor > .caret,
8259
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor > .caret,
8260
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor > .caret,
8261
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-button > .caret,
8262
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-button > .caret,
8263
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .caret,
8264
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor > .caret {
8265
+ position: relative;
8266
+ inset: 0;
8267
+ display: inline-flex;
8268
+ justify-content: center;
8269
+ align-items: center;
8270
+ margin: 0;
8271
+ width: var(--wm-aside-nav-item-caret-size);
8272
+ height: var(--wm-aside-nav-item-caret-size);
8273
+ font-size: var(--wm-aside-nav-item-caret-size);
8274
+ transform: rotate(180deg);
8275
+ }
8276
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:has(> .caret),
8277
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:has(> .caret),
8278
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:has(> .caret),
8279
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:has(> .caret),
8280
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-button:has(> .caret),
8281
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-button:has(> .caret),
8282
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:has(> .caret),
8283
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:has(> .caret) {
8284
+ padding-right: var(--wm-space-3);
8285
+ }
8286
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor,
8287
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor,
8288
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor,
8289
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor,
8290
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor,
8291
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
8272
8292
  background: var(--wm-aside-nav-item-background);
8273
8293
  color: var(--wm-aside-nav-item-color);
8274
8294
  }
8275
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor:before,
8276
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor:before,
8277
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:before,
8278
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:before,
8279
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before,
8280
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before {
8295
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:before,
8296
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:before,
8297
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:before,
8298
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:before,
8299
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before,
8300
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before {
8281
8301
  content: "";
8282
- top: 0;
8283
- left: 0;
8284
- right: 0;
8285
- bottom: 0;
8302
+ inset: 0;
8286
8303
  position: absolute;
8287
8304
  pointer-events: none;
8288
8305
  border-radius: inherit;
8289
8306
  opacity: 0;
8290
8307
  background: var(--wm-aside-nav-item-state-layer-color);
8291
8308
  }
8292
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor:hover::before,
8293
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor:hover::before,
8294
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:hover::before,
8295
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:hover::before,
8296
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover::before,
8297
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover::before,
8298
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor.hover::before,
8299
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor.hover::before,
8300
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor.hover::before,
8301
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor.hover::before,
8302
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before,
8303
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before {
8309
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:after,
8310
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:after,
8311
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:after,
8312
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:after,
8313
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:after,
8314
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:after {
8315
+ content: "";
8316
+ width: var(--wm-aside-nav-item-indicator-width);
8317
+ height: var(--wm-aside-nav-item-indicator-height);
8318
+ position: absolute;
8319
+ inset: var(--wm-aside-nav-item-indicator-position-top) var(--wm-aside-nav-item-indicator-position-right) var(--wm-aside-nav-item-indicator-position-bottom) var(--wm-aside-nav-item-indicator-position-left);
8320
+ pointer-events: none;
8321
+ border-radius: var(--wm-aside-nav-item-indicator-radius);
8322
+ background: var(--wm-aside-nav-item-indicator-color);
8323
+ }
8324
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:hover::before,
8325
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:hover::before,
8326
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:hover::before,
8327
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:hover::before,
8328
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover::before,
8329
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover::before,
8330
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor.hover::before,
8331
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor.hover::before,
8332
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor.hover::before,
8333
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor.hover::before,
8334
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before,
8335
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover::before {
8304
8336
  opacity: var(--wm-aside-nav-item-state-layer-opacity-hover);
8305
8337
  }
8306
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor:focus::before,
8307
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor:focus::before,
8308
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:focus::before,
8309
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:focus::before,
8310
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus::before,
8311
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus::before,
8312
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor.focus::before,
8313
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor.focus::before,
8314
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor.focus::before,
8315
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor.focus::before,
8316
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before,
8317
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before {
8338
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:focus::before,
8339
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:focus::before,
8340
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:focus::before,
8341
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:focus::before,
8342
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus::before,
8343
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus::before,
8344
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor.focus::before,
8345
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor.focus::before,
8346
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor.focus::before,
8347
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor.focus::before,
8348
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before,
8349
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus::before {
8318
8350
  opacity: var(--wm-aside-nav-item-state-layer-opacity-focus);
8319
8351
  }
8320
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor:active::before,
8321
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor:active::before,
8322
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active::before,
8323
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active::before,
8324
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active::before,
8325
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active::before,
8326
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor:active:focus::before,
8327
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor:active:focus::before,
8328
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus::before,
8329
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus::before,
8330
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus::before,
8331
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus::before,
8332
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor:active:hover::before,
8333
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor:active:hover::before,
8334
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover::before,
8335
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover::before,
8336
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover::before,
8337
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover::before,
8338
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor:active.focus::before,
8339
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor:active.focus::before,
8340
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
8341
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
8342
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before,
8343
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before {
8352
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:active::before,
8353
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:active::before,
8354
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:active::before,
8355
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:active::before,
8356
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active::before,
8357
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active::before,
8358
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:active:focus::before,
8359
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:active:focus::before,
8360
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus::before,
8361
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus::before,
8362
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus::before,
8363
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus::before,
8364
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:active:hover::before,
8365
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:active:hover::before,
8366
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover::before,
8367
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover::before,
8368
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover::before,
8369
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover::before,
8370
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:active.focus::before,
8371
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor:active.focus::before,
8372
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
8373
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus::before,
8374
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before,
8375
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus::before {
8344
8376
  opacity: var(--wm-aside-nav-item-state-layer-opacity-active);
8345
8377
  }
8346
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-anchor.active,
8347
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-anchor.active,
8348
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-menu > .app-anchor.active,
8349
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-menu > .app-anchor.active,
8350
- .wm-app .app-left-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active,
8351
- .wm-app .app-right-panel .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active {
8378
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor.active,
8379
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-anchor.active,
8380
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor.active,
8381
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-menu > .app-anchor.active,
8382
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active,
8383
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active {
8352
8384
  --wm-aside-nav-item-background: var(--wm-aside-nav-item-background-active);
8353
8385
  --wm-aside-nav-item-color: var(--wm-aside-nav-item-color-active);
8354
- }
8355
- .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-anchor,
8356
- .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-anchor,
8357
- .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-menu > .app-anchor,
8358
- .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-menu > .app-anchor,
8359
- .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor,
8360
- .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor {
8386
+ --wm-aside-nav-item-indicator-color: var(--wm-aside-nav-item-indicator-color-active);
8387
+ }
8388
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-anchor,
8389
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-anchor,
8390
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-menu > .app-anchor,
8391
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-menu > .app-anchor,
8392
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor,
8393
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor {
8361
8394
  --wm-aside-nav-item-background: var(--wm-aside-nav-item-background-active);
8362
8395
  --wm-aside-nav-item-color: var(--wm-aside-nav-item-color-active);
8363
8396
  }
8364
- .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-anchor .app-icon,
8365
- .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-anchor .app-icon,
8366
- .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-menu > .app-anchor .app-icon,
8367
- .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-menu > .app-anchor .app-icon,
8368
- .wm-app .app-left-panel .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor .app-icon,
8369
- .wm-app .app-right-panel .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor .app-icon {
8397
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-anchor .app-icon,
8398
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-anchor .app-icon,
8399
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-menu > .app-anchor .app-icon,
8400
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-menu > .app-anchor .app-icon,
8401
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor .app-icon,
8402
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor .app-icon {
8370
8403
  --wm-aside-nav-item-icon-background: var(--wm-aside-nav-item-icon-background-active);
8371
8404
  --wm-aside-nav-item-icon-color: var(--wm-aside-nav-item-icon-color-active);
8372
8405
  }
8373
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu,
8374
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu {
8406
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu,
8407
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu {
8375
8408
  flex-direction: column;
8376
8409
  position: relative;
8377
8410
  width: 100%;
8378
8411
  }
8379
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu > .app-anchor .anchor-caption,
8380
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu > .app-anchor .anchor-caption {
8412
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu > .app-anchor .anchor-caption,
8413
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu > .app-anchor .anchor-caption {
8381
8414
  width: 100%;
8382
8415
  white-space: nowrap;
8383
8416
  overflow: hidden;
8384
8417
  text-overflow: ellipsis;
8385
8418
  }
8386
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu,
8387
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu {
8419
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu,
8420
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu {
8388
8421
  display: flex;
8389
8422
  flex-direction: column;
8390
8423
  width: 100%;
@@ -8396,8 +8429,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8396
8429
  box-shadow: var(--wm-aside-nav-submenu-box-shadow);
8397
8430
  border-radius: var(--wm-aside-nav-submenu-radius);
8398
8431
  }
8399
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item > a,
8400
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item > a {
8432
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item > a,
8433
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item > a {
8401
8434
  color: var(--wm-aside-nav-submenu-item-color);
8402
8435
  background: var(--wm-aside-nav-submenu-item-background);
8403
8436
  min-height: var(--wm-aside-nav-submenu-item-min-height);
@@ -8410,62 +8443,47 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8410
8443
  border-radius: var(--wm-aside-nav-submenu-item-radius);
8411
8444
  gap: var(--wm-aside-nav-submenu-item-gap);
8412
8445
  }
8413
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.active > a,
8414
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.active > a {
8446
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.active > a,
8447
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.active > a {
8415
8448
  --wm-aside-nav-submenu-item-background: var(--wm-aside-nav-submenu-item-background-active);
8416
8449
  --wm-aside-nav-submenu-item-color: var(--wm-aside-nav-submenu-item-color-active);
8417
8450
  }
8418
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu,
8419
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu {
8451
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu,
8452
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu {
8420
8453
  position: relative;
8421
8454
  }
8422
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > a > .caret,
8423
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > a > .caret {
8455
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > a > .caret,
8456
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > a > .caret {
8424
8457
  transform: rotate(90deg);
8425
8458
  }
8426
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > .dropdown-menu,
8427
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > .dropdown-menu {
8459
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > .dropdown-menu,
8460
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu > .dropdown-menu {
8428
8461
  display: none;
8429
8462
  }
8430
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > a > .caret,
8431
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > a > .caret {
8463
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > a > .caret,
8464
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > a > .caret {
8432
8465
  transform: rotate(270deg);
8433
8466
  }
8434
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > .dropdown-menu,
8435
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > .dropdown-menu {
8467
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > .dropdown-menu,
8468
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu .app-menu-item.dropdown-submenu:hover > .dropdown-menu {
8436
8469
  display: flex;
8437
8470
  }
8438
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu:not(.open) > .dropdown-menu,
8439
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu:not(.open) > .dropdown-menu {
8471
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu:not(.open) > .dropdown-menu,
8472
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu:not(.open) > .dropdown-menu {
8440
8473
  display: none;
8441
8474
  }
8442
- .wm-app .app-left-panel .app-nav .app-nav-item > .dropdown.app-menu:not(.open) a > .caret,
8443
- .wm-app .app-right-panel .app-nav .app-nav-item > .dropdown.app-menu:not(.open) a > .caret {
8475
+ .wm-app .app-left-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu:not(.open) a > .caret,
8476
+ .wm-app .app-right-panel.app-nav-drawer .app-nav .app-nav-item > .dropdown.app-menu:not(.open) a > .caret {
8444
8477
  transform: rotate(0deg);
8445
8478
  }
8446
- .wm-app .app-left-panel .app-nav .app-nav-item a > .caret,
8447
- .wm-app .app-right-panel .app-nav .app-nav-item a > .caret {
8448
- display: inline-flex;
8449
- justify-content: center;
8450
- align-items: center;
8451
- margin: 0;
8452
- width: var(--wm-aside-nav-item-caret-size);
8453
- height: var(--wm-aside-nav-item-caret-size);
8454
- font-size: var(--wm-aside-nav-item-caret-size);
8455
- position: absolute;
8456
- right: calc(var(--wm-aside-nav-item-caret-size) / 1.5);
8457
- transform: rotate(180deg);
8458
- }
8459
- .wm-app .app-left-panel .app-nav .app-nav-item a:has(> .caret),
8460
- .wm-app .app-right-panel .app-nav .app-nav-item a:has(> .caret) {
8461
- padding-right: calc(var(--wm-aside-nav-item-caret-size) * 2) !important;
8462
- }
8463
8479
  .wm-app .app-left-panel.app-nav-rail,
8464
8480
  .wm-app .app-right-panel.app-nav-rail {
8465
8481
  min-width: var(--wm-aside-panel-rail-width);
8466
8482
  width: var(--wm-aside-panel-rail-width);
8467
8483
  background: var(--wm-aside-panel-rail-background);
8468
8484
  color: var(--wm-aside-panel-rail-color);
8485
+ border-right: var(--wm-aside-panel-rail-border);
8486
+ box-shadow: var(--wm-aside-panel-rail-shadow);
8469
8487
  padding-top: var(--wm-aside-panel-rail-padding-top);
8470
8488
  padding-right: var(--wm-aside-panel-rail-padding-right);
8471
8489
  padding-bottom: var(--wm-aside-panel-rail-padding-bottom);
@@ -8473,6 +8491,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8473
8491
  }
8474
8492
  .wm-app .app-left-panel.app-nav-rail .app-nav,
8475
8493
  .wm-app .app-right-panel.app-nav-rail .app-nav {
8494
+ padding: var(--wm-aside-nav-rail-padding);
8476
8495
  background: var(--wm-aside-nav-rail-background);
8477
8496
  gap: var(--wm-aside-nav-rail-gap);
8478
8497
  }
@@ -8486,6 +8505,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8486
8505
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor {
8487
8506
  flex-direction: column;
8488
8507
  justify-content: center;
8508
+ width: 100%;
8509
+ min-height: var(--wm-aside-nav-rail-item-height);
8489
8510
  font-size: var(--wm-aside-nav-rail-item-font-size);
8490
8511
  font-family: var(--wm-aside-nav-rail-item-font-family);
8491
8512
  font-weight: var(--wm-aside-nav-rail-item-font-weight);
@@ -8493,7 +8514,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8493
8514
  letter-spacing: var(--wm-aside-nav-rail-item-letter-spacing);
8494
8515
  gap: var(--wm-aside-nav-rail-item-gap);
8495
8516
  border-radius: var(--wm-aside-nav-rail-item-radius);
8496
- padding: var(--wm-aside-nav-rail-item-padding) !important;
8517
+ padding: var(--wm-aside-nav-rail-item-padding);
8497
8518
  }
8498
8519
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .anchor-caption,
8499
8520
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .anchor-caption,
@@ -8525,6 +8546,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8525
8546
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor .app-icon {
8526
8547
  margin: var(--wm-space-0);
8527
8548
  font-size: var(--wm-aside-nav-rail-item-icon-size);
8549
+ min-width: var(--wm-aside-nav-rail-item-icon-width);
8528
8550
  width: var(--wm-aside-nav-rail-item-icon-width);
8529
8551
  height: var(--wm-aside-nav-rail-item-icon-height);
8530
8552
  border-radius: var(--wm-aside-nav-rail-item-icon-radius);
@@ -8544,7 +8566,28 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8544
8566
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:before,
8545
8567
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before,
8546
8568
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:before {
8547
- display: none;
8569
+ content: "";
8570
+ inset: 0;
8571
+ position: absolute;
8572
+ pointer-events: none;
8573
+ border-radius: inherit;
8574
+ opacity: 0;
8575
+ background: var(--wm-aside-nav-item-state-layer-color);
8576
+ }
8577
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:after,
8578
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:after,
8579
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:after,
8580
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:after,
8581
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:after,
8582
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:after {
8583
+ content: "";
8584
+ width: var(--wm-aside-nav-rail-item-indicator-width);
8585
+ height: var(--wm-aside-nav-rail-item-indicator-height);
8586
+ position: absolute;
8587
+ inset: var(--wm-aside-nav-rail-item-indicator-position-top) var(--wm-aside-nav-rail-item-indicator-position-right) var(--wm-aside-nav-rail-item-indicator-position-bottom) var(--wm-aside-nav-rail-item-indicator-position-left);
8588
+ pointer-events: none;
8589
+ border-radius: var(--wm-aside-nav-rail-item-indicator-radius);
8590
+ background: var(--wm-aside-nav-rail-item-indicator-color);
8548
8591
  }
8549
8592
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .app-icon:before,
8550
8593
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor > .app-icon:before,
@@ -8565,10 +8608,24 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8565
8608
  position: absolute;
8566
8609
  inset: 0;
8567
8610
  pointer-events: none;
8568
- border-radius: inherit;
8611
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius);
8569
8612
  background: var(--wm-aside-nav-rail-item-icon-state-layer-color);
8570
8613
  opacity: 0;
8571
8614
  }
8615
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:hover:before,
8616
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:hover:before,
8617
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:hover:before,
8618
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:hover:before,
8619
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover:before,
8620
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:hover:before,
8621
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.hover:before,
8622
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.hover:before,
8623
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.hover:before,
8624
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.hover:before,
8625
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover:before,
8626
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover:before {
8627
+ opacity: var(--wm-aside-nav-rail-item-state-layer-opacity-hover);
8628
+ }
8572
8629
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:hover > .app-icon:after,
8573
8630
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:hover > .app-icon:after,
8574
8631
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:hover > .app-icon:after,
@@ -8583,6 +8640,20 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8583
8640
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.hover > .app-icon:after {
8584
8641
  opacity: var(--wm-aside-nav-rail-item-icon-state-layer-opacity-hover);
8585
8642
  }
8643
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:focus:before,
8644
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:focus:before,
8645
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:focus:before,
8646
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:focus:before,
8647
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus:before,
8648
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:focus:before,
8649
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.focus:before,
8650
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.focus:before,
8651
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.focus:before,
8652
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.focus:before,
8653
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus:before,
8654
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus:before {
8655
+ opacity: var(--wm-aside-nav-rail-item-state-layer-opacity-focus);
8656
+ }
8586
8657
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:focus > .app-icon:after,
8587
8658
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:focus > .app-icon:after,
8588
8659
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:focus > .app-icon:after,
@@ -8597,6 +8668,58 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8597
8668
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.focus > .app-icon:after {
8598
8669
  opacity: var(--wm-aside-nav-rail-item-icon-state-layer-opacity-focus);
8599
8670
  }
8671
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active,
8672
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active,
8673
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active,
8674
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active,
8675
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active,
8676
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active,
8677
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:focus,
8678
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:focus,
8679
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus,
8680
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus,
8681
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus,
8682
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus,
8683
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:hover,
8684
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:hover,
8685
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover,
8686
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover,
8687
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover,
8688
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover,
8689
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active.focus,
8690
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active.focus,
8691
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus,
8692
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus,
8693
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus,
8694
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus {
8695
+ --wm-aside-nav-rail-item-font-weight: var(--wm-aside-nav-rail-item-font-weight-active);
8696
+ }
8697
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:before,
8698
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:before,
8699
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:before,
8700
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:before,
8701
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:before,
8702
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:before,
8703
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:focus:before,
8704
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:focus:before,
8705
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus:before,
8706
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:focus:before,
8707
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus:before,
8708
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:focus:before,
8709
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:hover:before,
8710
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active:hover:before,
8711
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover:before,
8712
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active:hover:before,
8713
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover:before,
8714
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active:hover:before,
8715
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active.focus:before,
8716
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active.focus:before,
8717
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus:before,
8718
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active.focus:before,
8719
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus:before,
8720
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor:active.focus:before {
8721
+ opacity: var(--wm-aside-nav-rail-item-state-layer-opacity-active);
8722
+ }
8600
8723
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active > .app-icon:after,
8601
8724
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor:active > .app-icon:after,
8602
8725
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor:active > .app-icon:after,
@@ -8631,6 +8754,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8631
8754
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active {
8632
8755
  --wm-aside-nav-rail-item-background: var(--wm-aside-nav-rail-item-background-active);
8633
8756
  --wm-aside-nav-rail-item-color: var(--wm-aside-nav-rail-item-color-active);
8757
+ --wm-aside-nav-rail-item-font-weight: var(--wm-aside-nav-rail-item-font-weight-active);
8758
+ --wm-aside-nav-rail-item-indicator-color: var(--wm-aside-nav-rail-item-indicator-color-active);
8634
8759
  }
8635
8760
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active > .app-icon,
8636
8761
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active > .app-icon,
@@ -8640,7 +8765,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8640
8765
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active > .app-icon {
8641
8766
  background: var(--wm-aside-nav-rail-item-icon-background-active);
8642
8767
  color: var(--wm-aside-nav-rail-item-icon-color-active);
8643
- --wm-aside-nav-rail-item-icon-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
8768
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
8769
+ }
8770
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active > .app-icon:after,
8771
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-anchor.active > .app-icon:after,
8772
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.active > .app-icon:after,
8773
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-menu > .app-anchor.active > .app-icon:after,
8774
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active > .app-icon:after,
8775
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-popover-wrapper > .app-anchor.active > .app-icon:after {
8776
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
8644
8777
  }
8645
8778
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .app-button,
8646
8779
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .app-button {
@@ -8655,6 +8788,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8655
8788
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor {
8656
8789
  --wm-aside-nav-rail-item-background: var(--wm-aside-nav-rail-item-background-active);
8657
8790
  --wm-aside-nav-rail-item-color: var(--wm-aside-nav-rail-item-color-active);
8791
+ --wm-aside-nav-rail-item-font-weight: var(--wm-aside-nav-rail-item-font-weight-active);
8792
+ --wm-aside-nav-rail-item-indicator-color: var(--wm-aside-nav-rail-item-indicator-color-active);
8658
8793
  }
8659
8794
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor > .app-icon,
8660
8795
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor > .app-icon,
@@ -8664,7 +8799,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8664
8799
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor > .app-icon {
8665
8800
  background: var(--wm-aside-nav-rail-item-icon-background-active);
8666
8801
  color: var(--wm-aside-nav-rail-item-icon-color-active);
8667
- --wm-aside-nav-rail-item-icon-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
8802
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
8803
+ }
8804
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor > .app-icon:after,
8805
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-anchor > .app-icon:after,
8806
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-menu > .app-anchor > .app-icon:after,
8807
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-menu > .app-anchor > .app-icon:after,
8808
+ .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor > .app-icon:after,
8809
+ .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item.active > .app-popover-wrapper > .app-anchor > .app-icon:after {
8810
+ border-radius: var(--wm-aside-nav-rail-item-icon-radius-active);
8668
8811
  }
8669
8812
  .wm-app .app-left-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu,
8670
8813
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu {
@@ -8735,6 +8878,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8735
8878
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu.open > a > .app-icon:after {
8736
8879
  opacity: var(--wm-aside-nav-rail-item-icon-state-layer-opacity-focus);
8737
8880
  }
8881
+ .wm-app .app-right-panel.app-nav-drawer {
8882
+ border-right: none;
8883
+ border-left: var(--wm-aside-panel-border);
8884
+ }
8885
+ .wm-app .app-right-panel.app-nav-rail {
8886
+ border-right: none;
8887
+ border-left: var(--wm-aside-panel-rail-border);
8888
+ }
8738
8889
  .wm-app .app-right-panel.app-nav-rail .app-nav .app-nav-item > .dropdown.app-menu .dropdown-menu {
8739
8890
  right: calc(100% + var(--wm-aside-panel-rail-padding-left));
8740
8891
  left: auto;
@@ -8976,7 +9127,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8976
9127
  font-size: var(--wm-horizontal-page-slider-anchor-icon-size);
8977
9128
  }
8978
9129
  .wm-app .app-picture {
8979
- position: relative;
8980
9130
  display: inline-flex;
8981
9131
  justify-content: center;
8982
9132
  align-items: center;
@@ -8992,6 +9142,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
8992
9142
  }
8993
9143
  .wm-app .app-picture.img-circle {
8994
9144
  border-radius: var(--wm-picture-radius-circle);
9145
+ aspect-ratio: 1;
8995
9146
  }
8996
9147
  .wm-app .app-picture.img-thumbnail {
8997
9148
  padding: var(--wm-picture-thumbnail-padding);
@@ -9103,16 +9254,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9103
9254
  display: inline-block;
9104
9255
  }
9105
9256
  .wm-app .app-radio.radio > label {
9106
- padding: var(--wm-space-0);
9107
- display: inline-flex;
9108
9257
  width: auto;
9258
+ display: inline-flex;
9259
+ padding: var(--wm-space-0);
9109
9260
  min-height: var(--wm-radiobutton-state-layer-size);
9110
- font-size: var(--wm-radiobutton-caption-font-size);
9111
- font-family: var(--wm-radiobutton-caption-font-family);
9112
- font-weight: var(--wm-radiobutton-caption-font-weight);
9113
- line-height: var(--wm-radiobutton-caption-line-height);
9114
- letter-spacing: var(--wm-radiobutton-caption-letter-spacing);
9115
- color: var(--wm-radiobutton-caption-color);
9116
9261
  cursor: pointer;
9117
9262
  }
9118
9263
  .wm-app .app-radio.radio > label > input[type="radio"] {
@@ -9127,39 +9272,40 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9127
9272
  border-radius: 50%;
9128
9273
  z-index: 1;
9129
9274
  cursor: pointer;
9275
+ background: var(--wm-radiobutton-state-layer-color);
9276
+ opacity: var(--wm-radiobutton-state-layer-opacity);
9130
9277
  }
9131
9278
  .wm-app .app-radio.radio > label > input[type="radio"]:hover {
9132
- background: var(--wm-radiobutton-state-hover);
9279
+ --wm-radiobutton-state-layer-opacity: var(--wm-radiobutton-state-layer-opacity-hover);
9133
9280
  }
9134
9281
  .wm-app .app-radio.radio > label > input[type="radio"]:focus {
9135
- background: var(--wm-radiobutton-state-focus);
9136
- outline: 0 !important;
9282
+ --wm-radiobutton-state-layer-opacity: var(--wm-radiobutton-state-layer-opacity-focus);
9137
9283
  }
9138
9284
  .wm-app .app-radio.radio > label > input[type="radio"]:active {
9139
- background: var(--wm-radiobutton-state-active);
9285
+ --wm-radiobutton-state-layer-opacity: var(--wm-radiobutton-state-layer-opacity-active);
9140
9286
  }
9141
9287
  .wm-app .app-radio.radio > label > input[type="radio"]:checked {
9142
- --wm-radiobutton-caption-color: var(--wm-radiobutton-selected-caption-color);
9288
+ --wm-radiobutton-state-layer-color: var(--wm-radiobutton-color-selected);
9289
+ }
9290
+ .wm-app .app-radio.radio > label > input[type="radio"]:checked + .caption {
9291
+ --wm-radiobutton-label-color: var(--wm-radiobutton-label-color-selected);
9143
9292
  }
9144
9293
  .wm-app .app-radio.radio > label > input[type="radio"]:checked + .caption:before {
9145
- border-color: var(--wm-radiobutton-selected-border-color);
9294
+ --wm-radiobutton-border-color: var(--wm-radiobutton-color-selected);
9146
9295
  }
9147
9296
  .wm-app .app-radio.radio > label > input[type="radio"]:checked + .caption:after {
9148
9297
  transform: scale(1);
9149
9298
  }
9150
- .wm-app .app-radio.radio > label > input[type="radio"]:checked:hover {
9151
- background: var(--wm-radiobutton-selected-state-hover);
9152
- }
9153
- .wm-app .app-radio.radio > label > input[type="radio"]:checked:focus {
9154
- background: var(--wm-radiobutton-selected-state-focus);
9155
- }
9156
- .wm-app .app-radio.radio > label > input[type="radio"]:checked:active {
9157
- background: var(--wm-radiobutton-selected-state-active);
9158
- }
9159
9299
  .wm-app .app-radio.radio > label .caption {
9160
9300
  display: inline-block;
9161
9301
  padding-left: calc(var(--wm-radiobutton-state-layer-size) + var(--wm-radiobutton-gap));
9162
- padding-top: calc(calc(var(--wm-radiobutton-state-layer-size) - var(--wm-radiobutton-caption-line-height)) / 2);
9302
+ padding-top: calc(calc(var(--wm-radiobutton-state-layer-size) - var(--wm-radiobutton-label-line-height)) / 2);
9303
+ font-size: var(--wm-radiobutton-label-font-size);
9304
+ font-family: var(--wm-radiobutton-label-font-family);
9305
+ font-weight: var(--wm-radiobutton-label-font-weight);
9306
+ line-height: var(--wm-radiobutton-label-line-height);
9307
+ letter-spacing: var(--wm-radiobutton-label-letter-spacing);
9308
+ color: var(--wm-radiobutton-label-color);
9163
9309
  }
9164
9310
  .wm-app .app-radio.radio > label .caption:before,
9165
9311
  .wm-app .app-radio.radio > label .caption:after {
@@ -9174,7 +9320,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9174
9320
  top: calc(calc(var(--wm-radiobutton-state-layer-size) - var(--wm-radiobutton-size))/2);
9175
9321
  background: var(--wm-radiobutton-background);
9176
9322
  border: var(--wm-radiobutton-border-width) solid var(--wm-radiobutton-border-color);
9177
- border-radius: var(--wm-radiobutton-border-radius);
9323
+ border-radius: 50%;
9178
9324
  box-sizing: border-box;
9179
9325
  }
9180
9326
  .wm-app .app-radio.radio > label .caption:after {
@@ -9184,47 +9330,32 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9184
9330
  height: var(--wm-radiobutton-indicator-size);
9185
9331
  transform: scale(0);
9186
9332
  transition: all 0.2s ease-in-out;
9187
- background: var(--wm-radiobutton-selected-border-color);
9333
+ background: var(--wm-radiobutton-color-selected);
9188
9334
  border-radius: 50%;
9189
9335
  }
9190
9336
  .wm-app .app-radio.radio > label > img {
9191
9337
  display: none;
9192
9338
  }
9339
+ .wm-app .app-radio.radio.primary {
9340
+ --wm-radiobutton-color-selected: var(--wm-color-primary);
9341
+ }
9193
9342
  .wm-app .app-radio.radio.secondary {
9194
- --wm-radiobutton-selected-background: var(--wm-color-secondary);
9195
- --wm-radiobutton-selected-border-color: var(--wm-color-secondary);
9196
- --wm-radiobutton-selected-state-hover: var(--wm-color-secondary-hover);
9197
- --wm-radiobutton-selected-state-focus: var(--wm-color-secondary-focus);
9343
+ --wm-radiobutton-color-selected: var(--wm-color-secondary);
9198
9344
  }
9199
9345
  .wm-app .app-radio.radio.tertiary {
9200
- --wm-radiobutton-selected-background: var(--wm-color-tertiary);
9201
- --wm-radiobutton-selected-border-color: var(--wm-color-tertiary);
9202
- --wm-radiobutton-selected-state-hover: var(--wm-color-tertiary-hover);
9203
- --wm-radiobutton-selected-state-focus: var(--wm-color-tertiary-focus);
9346
+ --wm-radiobutton-color-selected: var(--wm-color-tertiary);
9204
9347
  }
9205
9348
  .wm-app .app-radio.radio.success {
9206
- --wm-radiobutton-selected-background: var(--wm-color-success);
9207
- --wm-radiobutton-selected-border-color: var(--wm-color-success);
9208
- --wm-radiobutton-selected-state-hover: var(--wm-color-success-hover);
9209
- --wm-radiobutton-selected-state-focus: var(--wm-color-success-focus);
9349
+ --wm-radiobutton-color-selected: var(--wm-color-success);
9210
9350
  }
9211
9351
  .wm-app .app-radio.radio.info {
9212
- --wm-radiobutton-selected-background: var(--wm-color-info);
9213
- --wm-radiobutton-selected-border-color: var(--wm-color-info);
9214
- --wm-radiobutton-selected-state-hover: var(--wm-color-info-hover);
9215
- --wm-radiobutton-selected-state-focus: var(--wm-color-info-focus);
9352
+ --wm-radiobutton-color-selected: var(--wm-color-info);
9216
9353
  }
9217
9354
  .wm-app .app-radio.radio.warning {
9218
- --wm-radiobutton-selected-background: var(--wm-color-warning);
9219
- --wm-radiobutton-selected-border-color: var(--wm-color-warning);
9220
- --wm-radiobutton-selected-state-hover: var(--wm-color-warning-hover);
9221
- --wm-radiobutton-selected-state-focus: var(--wm-color-warning-focus);
9355
+ --wm-radiobutton-color-selected: var(--wm-color-warning);
9222
9356
  }
9223
9357
  .wm-app .app-radio.radio.error {
9224
- --wm-radiobutton-selected-background: var(--wm-color-error);
9225
- --wm-radiobutton-selected-border-color: var(--wm-color-error);
9226
- --wm-radiobutton-selected-state-hover: var(--wm-color-error-hover);
9227
- --wm-radiobutton-selected-state-focus: var(--wm-color-error-focus);
9358
+ --wm-radiobutton-color-selected: var(--wm-color-error);
9228
9359
  }
9229
9360
  .wm-app .app-radioset {
9230
9361
  padding: 0;
@@ -9234,8 +9365,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9234
9365
  .wm-app .app-radioset.list-group {
9235
9366
  display: flex;
9236
9367
  flex-wrap: nowrap;
9237
- column-gap: var(--wm-radiobutton-set-item-gap);
9238
- row-gap: calc(var(--wm-radiobutton-set-item-gap) * 0.25);
9368
+ column-gap: var(--wm-radiobutton-set-item-column-gap);
9369
+ row-gap: var(--wm-radiobutton-set-item-row-gap);
9239
9370
  overflow: visible;
9240
9371
  }
9241
9372
  .wm-app .app-radioset.list-group > li {
@@ -9465,11 +9596,19 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9465
9596
  left: 0;
9466
9597
  height: 100%;
9467
9598
  width: 100%;
9468
- background: var(--wm-spinner-loading-data-msg-background);
9469
9599
  color: var(--wm-spinner-loading-data-msg-color);
9470
9600
  border-radius: var(--wm-spinner-loading-data-msg-radius);
9471
9601
  z-index: 1;
9472
9602
  }
9603
+ .wm-app .loading-data-msg:after {
9604
+ content: "";
9605
+ position: absolute;
9606
+ inset: 0;
9607
+ width: 100%;
9608
+ height: 100%;
9609
+ background: var(--wm-spinner-loading-data-msg-background);
9610
+ opacity: var(--wm-spinner-loading-data-msg-background-opacity);
9611
+ }
9473
9612
  .wm-app .loading-data-msg > span {
9474
9613
  display: flex;
9475
9614
  align-items: center;
@@ -9678,9 +9817,8 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9678
9817
  }
9679
9818
  .wm-app .app-textarea {
9680
9819
  position: relative;
9681
- padding: var(--wm-form-control-padding) var(--wm-form-control-padding) calc(var(--wm-form-control-padding) * 0.85);
9682
- min-height: calc(var(--wm-form-control-height) * 1.85);
9683
- height: calc(var(--wm-form-control-height) * 1.85);
9820
+ min-height: calc(var(--wm-form-control-height) + var(--wm-form-control-line-height) + 2px);
9821
+ height: calc(var(--wm-form-control-height) + var(--wm-form-control-line-height) + 2px);
9684
9822
  min-width: 100%;
9685
9823
  max-width: 100%;
9686
9824
  }
@@ -9701,61 +9839,72 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9701
9839
  padding: var(--wm-tile-padding);
9702
9840
  background: var(--wm-tile-background);
9703
9841
  color: var(--wm-tile-color);
9704
- border-radius: var(--wm-tile-radius);
9705
- box-shadow: var(--wm-tile-shadow);
9706
- }
9707
- .wm-app .app-tile.bg-primary {
9708
- --wm-tile-background: var(--wm-tile-primary-background);
9709
- --wm-tile-color: var(--wm-tile-primary-color);
9710
- }
9711
- .wm-app .app-tile.bg-secondary {
9712
- --wm-tile-background: var(--wm-tile-secondary-background);
9713
- --wm-tile-color: var(--wm-tile-secondary-color);
9714
- }
9715
- .wm-app .app-tile.bg-tertiary {
9716
- --wm-tile-background: var(--wm-tile-tertiary-background);
9717
- --wm-tile-color: var(--wm-tile-tertiary-color);
9842
+ border-radius: var(--wm-tile-radius);
9843
+ box-shadow: var(--wm-tile-shadow);
9718
9844
  }
9719
- .wm-app .app-tile.bg-success {
9720
- --wm-tile-background: var(--wm-tile-success-background);
9721
- --wm-tile-color: var(--wm-tile-success-color);
9845
+ .wm-app .app-tile * {
9846
+ color: currentColor;
9722
9847
  }
9723
- .wm-app .app-tile.bg-info {
9724
- --wm-tile-background: var(--wm-tile-info-background);
9725
- --wm-tile-color: var(--wm-tile-info-color);
9848
+ .wm-app .app-tile.bg-default {
9849
+ --wm-tile-background: var(--wm-tile-default-background);
9850
+ --wm-tile-color: var(--wm-tile-default-color);
9726
9851
  }
9727
- .wm-app .app-tile.bg-warning {
9728
- --wm-tile-background: var(--wm-tile-warning-background);
9729
- --wm-tile-color: var(--wm-tile-warning-color);
9852
+ .wm-app .app-tile.bg-default-filled {
9853
+ --wm-tile-background: var(--wm-tile-filled-default-background);
9854
+ --wm-tile-color: var(--wm-tile-filled-default-color);
9730
9855
  }
9731
- .wm-app .app-tile.bg-danger {
9732
- --wm-tile-background: var(--wm-tile-danger-background);
9733
- --wm-tile-color: var(--wm-tile-danger-color);
9856
+ .wm-app .app-tile.bg-primary {
9857
+ --wm-tile-background: var(--wm-tile-primary-background);
9858
+ --wm-tile-color: var(--wm-tile-primary-color);
9734
9859
  }
9735
9860
  .wm-app .app-tile.bg-primary-filled {
9736
9861
  --wm-tile-background: var(--wm-tile-filled-primary-background);
9737
9862
  --wm-tile-color: var(--wm-tile-filled-primary-color);
9738
9863
  }
9864
+ .wm-app .app-tile.bg-secondary {
9865
+ --wm-tile-background: var(--wm-tile-secondary-background);
9866
+ --wm-tile-color: var(--wm-tile-secondary-color);
9867
+ }
9739
9868
  .wm-app .app-tile.bg-secondary-filled {
9740
9869
  --wm-tile-background: var(--wm-tile-filled-secondary-background);
9741
9870
  --wm-tile-color: var(--wm-tile-filled-secondary-color);
9742
9871
  }
9872
+ .wm-app .app-tile.bg-tertiary {
9873
+ --wm-tile-background: var(--wm-tile-tertiary-background);
9874
+ --wm-tile-color: var(--wm-tile-tertiary-color);
9875
+ }
9743
9876
  .wm-app .app-tile.bg-tertiary-filled {
9744
9877
  --wm-tile-background: var(--wm-tile-filled-tertiary-background);
9745
9878
  --wm-tile-color: var(--wm-tile-filled-tertiary-color);
9746
9879
  }
9880
+ .wm-app .app-tile.bg-success {
9881
+ --wm-tile-background: var(--wm-tile-success-background);
9882
+ --wm-tile-color: var(--wm-tile-success-color);
9883
+ }
9747
9884
  .wm-app .app-tile.bg-success-filled {
9748
9885
  --wm-tile-background: var(--wm-tile-filled-success-background);
9749
9886
  --wm-tile-color: var(--wm-tile-filled-success-color);
9750
9887
  }
9888
+ .wm-app .app-tile.bg-info {
9889
+ --wm-tile-background: var(--wm-tile-info-background);
9890
+ --wm-tile-color: var(--wm-tile-info-color);
9891
+ }
9751
9892
  .wm-app .app-tile.bg-info-filled {
9752
9893
  --wm-tile-background: var(--wm-tile-filled-info-background);
9753
9894
  --wm-tile-color: var(--wm-tile-filled-info-color);
9754
9895
  }
9896
+ .wm-app .app-tile.bg-warning {
9897
+ --wm-tile-background: var(--wm-tile-warning-background);
9898
+ --wm-tile-color: var(--wm-tile-warning-color);
9899
+ }
9755
9900
  .wm-app .app-tile.bg-warning-filled {
9756
9901
  --wm-tile-background: var(--wm-tile-filled-warning-background);
9757
9902
  --wm-tile-color: var(--wm-tile-filled-warning-color);
9758
9903
  }
9904
+ .wm-app .app-tile.bg-danger {
9905
+ --wm-tile-background: var(--wm-tile-danger-background);
9906
+ --wm-tile-color: var(--wm-tile-danger-color);
9907
+ }
9759
9908
  .wm-app .app-tile.bg-danger-filled {
9760
9909
  --wm-tile-background: var(--wm-tile-filled-danger-background);
9761
9910
  --wm-tile-color: var(--wm-tile-filled-danger-color);
@@ -9919,104 +10068,72 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
9919
10068
  width: auto;
9920
10069
  margin: 0 calc(50% - calc(var(--wm-toast-container-width)/2));
9921
10070
  }
9922
- .wm-app .app-toggle.app-checkbox.checkbox label {
9923
- align-items: center;
10071
+ .wm-app .app-checkbox.checkbox.app-toggle {
9924
10072
  display: inline-flex;
9925
- flex-shrink: 0;
9926
- position: relative;
9927
- min-height: var(--wm-toggle-label-min-height);
9928
- width: var(--wm-toggle-label-width);
9929
- border-radius: 28px;
10073
+ }
10074
+ .wm-app .app-checkbox.checkbox.app-toggle label {
10075
+ display: inline-flex;
10076
+ align-items: center;
10077
+ width: var(--wm-toggle-width);
10078
+ min-height: var(--wm-toggle-height);
10079
+ background: var(--wm-toggle-background);
10080
+ border: var(--wm-toggle-border-width) var(--wm-toggle-border-style) var(--wm-toggle-border-color);
10081
+ border-radius: var(--wm-toggle-radius);
9930
10082
  user-select: none;
10083
+ -webkit-user-select: none;
9931
10084
  -webkit-tap-highlight-color: transparent;
9932
10085
  }
9933
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"] {
10086
+ .wm-app .app-checkbox.checkbox.app-toggle label > input[type="checkbox"] {
9934
10087
  -webkit-appearance: none;
9935
- z-index: 2;
9936
- position: absolute;
9937
- left: calc(-1 * var(--wm-space-1));
9938
- top: calc(-1 * var(--wm-space-1));
9939
- display: block;
9940
- margin: 0;
9941
- border-radius: var(--wm-radius-circle);
9942
10088
  width: var(--wm-toggle-state-layer-size);
9943
10089
  height: var(--wm-toggle-state-layer-size);
10090
+ border-radius: var(--wm-radius-circle);
10091
+ position: absolute;
10092
+ left: calc(-1 * var(--wm-space-1) - var(--wm-toggle-border-width));
10093
+ top: calc(-1 * var(--wm-space-1) - var(--wm-toggle-border-width));
10094
+ z-index: 2;
10095
+ margin: 0;
9944
10096
  cursor: pointer;
10097
+ background: var(--wm-toggle-state-layer-color);
10098
+ opacity: var(--wm-toggle-state-layer-opacity);
9945
10099
  }
9946
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:hover {
9947
- background: var(--wm-toggle-state-hover);
10100
+ .wm-app .app-checkbox.checkbox.app-toggle label > input[type="checkbox"]:hover {
10101
+ --wm-toggle-state-layer-opacity: var(--wm-toggle-state-layer-opacity-hover);
9948
10102
  }
9949
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:active {
9950
- background: var(--wm-toggle-state-active);
10103
+ .wm-app .app-checkbox.checkbox.app-toggle label > input[type="checkbox"]:focus {
10104
+ --wm-toggle-state-layer-opacity: var(--wm-toggle-state-layer-opacity-focus);
9951
10105
  }
9952
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:focus {
9953
- background: var(--wm-toggle-state-focus);
10106
+ .wm-app .app-checkbox.checkbox.app-toggle label > input[type="checkbox"]:active {
10107
+ --wm-toggle-state-layer-opacity: var(--wm-toggle-state-layer-opacity-active);
9954
10108
  }
9955
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked {
9956
- left: unset;
9957
- right: calc(-1 * var(--wm-space-1));
10109
+ .wm-app .app-checkbox.checkbox.app-toggle label > input[type="checkbox"]:checked {
10110
+ left: calc(100% - var(--wm-space-2) - var(--wm-toggle-handle-size) - var(--wm-toggle-border-width));
9958
10111
  }
9959
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:hover {
9960
- background: var(--wm-toggle-checked-state-hover);
10112
+ .wm-app .app-checkbox.checkbox.app-toggle label > input[type="checkbox"]:checked + .caption {
10113
+ left: calc(100% - var(--wm-space-1) - var(--wm-toggle-handle-size) + var(--wm-toggle-border-width));
9961
10114
  }
9962
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:hover + .caption:before {
9963
- --wm-toggle-handle-checked-background: var(--wm-toggle-handle-checked-focus-background);
10115
+ .wm-app .app-checkbox.checkbox.app-toggle label:has(>input[type="checkbox"]:checked) {
10116
+ --wm-toggle-handle-size: var(--wm-toggle-handle-size-selected);
10117
+ --wm-toggle-handle-color: var(--wm-toggle-handle-color-selected);
10118
+ --wm-toggle-background: var(--wm-toggle-background-selected);
10119
+ --wm-toggle-border-color: var(--wm-toggle-background-selected);
10120
+ --wm-toggle-state-layer-color: var(--wm-toggle-state-layer-color-selected);
9964
10121
  }
9965
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:focus {
9966
- background: var(--wm-toggle-checked-state-focus);
9967
- }
9968
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:focus + .caption:before {
9969
- --wm-toggle-handle-checked-background: var(--wm-toggle-handle-checked-focus-background);
9970
- }
9971
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:active {
9972
- background: var(--wm-toggle-checked-state-active);
9973
- }
9974
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked:active + .caption:before {
9975
- --wm-toggle-handle-checked-background: var(--wm-toggle-handle-checked-active-background);
9976
- }
9977
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked + .caption {
9978
- background: var(--wm-toggle-track-active-background);
9979
- border-color: var(--wm-toggle-track-active-background);
9980
- }
9981
- .wm-app .app-toggle.app-checkbox.checkbox label > input[type="checkbox"]:checked + .caption:before {
9982
- height: calc(var(--wm-toggle-handle-height) * 1.5);
9983
- width: calc(var(--wm-toggle-handle-width) * 1.5);
9984
- left: calc(100% - calc(var(--wm-toggle-handle-width) * 1.75));
9985
- background: var(--wm-toggle-handle-checked-background);
9986
- margin: 2px;
9987
- border: unset;
9988
- }
9989
- .wm-app .app-toggle.app-checkbox.checkbox label .caption {
9990
- position: absolute;
9991
- inset: 0;
9992
- background: var(--wm-toggle-track-background);
9993
- border-radius: inherit;
9994
- border: var(--wm-toggle-track-border-width) var(--wm-toggle-track-border-style) var(--wm-toggle-track-border-color);
9995
- color: transparent;
10122
+ .wm-app .app-checkbox.checkbox.app-toggle label .caption {
10123
+ font-size: 0;
9996
10124
  padding: unset;
9997
- display: flex;
9998
- place-items: center;
9999
- }
10000
- .wm-app .app-toggle.app-checkbox.checkbox label .caption:before {
10125
+ width: var(--wm-toggle-handle-size);
10126
+ height: var(--wm-toggle-handle-size);
10127
+ background: var(--wm-toggle-handle-color);
10128
+ border-radius: inherit;
10001
10129
  position: absolute;
10002
- content: "";
10003
- background: var(--wm-toggle-handle-background);
10004
- border-radius: var(--wm-radius-circle);
10005
- margin: 6px;
10006
- transition: 0.25s ease-in;
10007
- z-index: 1;
10008
- left: 0;
10009
- top: 0;
10010
- border: unset;
10011
- height: var(--wm-toggle-handle-height);
10012
- width: var(--wm-toggle-handle-width);
10130
+ left: calc(var(--wm-space-1) + var(--wm-toggle-border-width));
10131
+ transition: 0.2s ease-in-out;
10013
10132
  }
10014
- .wm-app .app-toggle.app-checkbox.checkbox label .caption:after {
10133
+ .wm-app .app-checkbox.checkbox.app-toggle label .caption:before,
10134
+ .wm-app .app-checkbox.checkbox.app-toggle label .caption:after {
10015
10135
  display: none;
10016
10136
  }
10017
- .wm-app .app-toggle.app-checkbox.checkbox label.unchecked:hover > input:hover + .caption:before {
10018
- --wm-toggle-handle-background: var(--wm-toggle-handle-hover-background);
10019
- }
10020
10137
  .wm-app .ui-widget {
10021
10138
  font-family: Verdana, Arial, sans-serif;
10022
10139
  font-size: 1.1em;
@@ -10893,410 +11010,186 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
10893
11010
  .wm-app .app-wizard {
10894
11011
  display: flex;
10895
11012
  flex-direction: column;
10896
- position: relative;
10897
- box-shadow: var(--wm-wizard-shadow);
10898
11013
  background: var(--wm-wizard-background);
10899
11014
  border-radius: var(--wm-wizard-radius);
11015
+ box-shadow: var(--wm-wizard-shadow);
11016
+ padding: var(--wm-wizard-padding);
11017
+ gap: var(--wm-wizard-gap);
10900
11018
  }
10901
11019
  .wm-app .app-wizard .app-wizard-heading {
10902
- position: relative;
10903
11020
  width: 100%;
10904
- padding: var(--wm-wizard-heading-padding);
10905
11021
  background: var(--wm-wizard-heading-background);
10906
11022
  border-radius: var(--wm-wizard-heading-radius);
11023
+ padding: var(--wm-wizard-heading-padding);
11024
+ overflow: auto;
10907
11025
  }
10908
11026
  .wm-app .app-wizard .app-wizard-heading .app-wizard-steps {
10909
11027
  display: flex;
10910
11028
  flex-direction: row;
10911
11029
  align-items: center;
10912
- position: relative;
11030
+ justify-content: center;
11031
+ gap: var(--wm-wizard-step-gap);
10913
11032
  }
10914
11033
  .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step {
10915
- position: relative;
10916
- flex: 1;
10917
- }
10918
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:first-of-type)::before {
10919
- background: var(--wm-wizard-stepper-step-indicator-border);
10920
- position: absolute;
10921
- content: "";
10922
- transform: translateY(var(--wm-app-wizard-stepper-step-indicator-transform-y));
10923
- height: var(--wm-wizard-stepper-step-indicator-border-height);
10924
- left: calc(-50% + var(--wm-wizard-stepper-step-indicator-gap));
10925
- right: calc(50% + var(--wm-wizard-stepper-step-indicator-gap));
11034
+ min-width: 160px;
11035
+ display: inline-flex;
11036
+ align-items: center;
11037
+ gap: var(--wm-wizard-step-gap);
10926
11038
  }
10927
11039
  .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
10928
- display: flex;
10929
- flex-direction: column;
10930
- text-align: center;
10931
- cursor: pointer;
10932
- gap: var(--wm-wizard-stepper-step-title-gap);
11040
+ display: inline-flex;
11041
+ flex-direction: row;
11042
+ justify-content: flex-start;
11043
+ gap: var(--wm-wizard-step-gap);
11044
+ min-width: fit-content;
11045
+ color: var(--wm-wizard-step-title-color);
10933
11046
  }
10934
11047
  .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number {
10935
11048
  display: inline-flex;
10936
11049
  justify-content: center;
10937
11050
  align-items: center;
10938
- width: var(--wm-wizard-stepper-step-width);
10939
- height: var(--wm-wizard-stepper-step-height);
10940
- border-radius: var(--wm-wizard-stepper-step-radius);
10941
- background: var(--wm-wizard-stepper-step-background);
11051
+ min-width: var(--wm-wizard-step-indicator-size);
11052
+ width: var(--wm-wizard-step-indicator-size);
11053
+ height: var(--wm-wizard-step-indicator-size);
11054
+ background: var(--wm-wizard-step-indicator-background);
11055
+ border: var(--wm-wizard-step-indicator-border-width) var(--wm-wizard-step-indicator-border-style) var(--wm-wizard-step-indicator-border-color);
11056
+ border-radius: var(--wm-wizard-step-indicator-radius);
10942
11057
  }
10943
11058
  .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number .count {
10944
- color: var(--wm-wizard-stepper-step-count-color);
10945
- font-size: var(--wm-wizard-stepper-step-count-font-size);
10946
- font-weight: var(--wm-wizard-stepper-step-count-font-weight);
10947
- font-family: var(--wm-wizard-stepper-step-count-font-family);
10948
- line-height: var(--wm-wizard-stepper-step-count-line-height);
10949
- }
10950
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper .step-title,
10951
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper > span {
10952
- font-size: var(--wm-wizard-stepper-step-title-font-size);
10953
- font-weight: var(--wm-wizard-stepper-step-title-font-weight);
10954
- font-family: var(--wm-wizard-stepper-step-title-font-family);
10955
- color: var(--wm-wizard-stepper-step-title-color);
10956
- line-height: var(--wm-wizard-stepper-step-title-line-height);
10957
- }
10958
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number {
10959
- background: var(--wm-wizard-stepper-step-current-background);
10960
- }
10961
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
10962
- background: var(--wm-wizard-stepper-step-active-background);
11059
+ color: var(--wm-wizard-step-count-color);
11060
+ font-size: var(--wm-wizard-step-count-font-size);
11061
+ font-weight: var(--wm-wizard-step-count-font-weight);
11062
+ font-family: var(--wm-wizard-step-count-font-family);
11063
+ line-height: var(--wm-wizard-step-count-line-height);
11064
+ letter-spacing: var(--wm-wizard-step-count-letter-spacing);
11065
+ }
11066
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number .app-icon {
11067
+ color: var(--wm-wizard-step-icon-color);
11068
+ --wm-anchor-icon-size: var(--wm-wizard-step-icon-size);
11069
+ }
11070
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper {
11071
+ display: flex;
11072
+ flex-direction: column;
10963
11073
  }
10964
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
10965
- opacity: var(--wm-wizard-stepper-step-disabled-background);
11074
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper .step-title {
11075
+ color: var(--wm-wizard-step-title-color);
11076
+ font-family: var(--wm-wizard-step-title-font-family);
11077
+ font-weight: var(--wm-wizard-step-title-font-weight);
11078
+ font-size: var(--wm-wizard-step-title-font-size);
11079
+ line-height: var(--wm-wizard-step-title-line-height);
11080
+ letter-spacing: var(--wm-wizard-step-title-letter-spacing);
11081
+ }
11082
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper .step-description {
11083
+ color: var(--wm-wizard-step-description-color);
11084
+ font-family: var(--wm-wizard-step-description-font-family);
11085
+ font-weight: var(--wm-wizard-step-description-font-weight);
11086
+ font-size: var(--wm-wizard-step-description-font-size);
11087
+ line-height: var(--wm-wizard-step-description-line-height);
11088
+ letter-spacing: var(--wm-wizard-step-description-letter-spacing);
11089
+ }
11090
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:last-of-type):after {
11091
+ content: "";
11092
+ width: 100%;
11093
+ height: 0;
11094
+ position: relative;
11095
+ display: block;
11096
+ border-top: var(--wm-wizard-step-connector-width) var(--wm-wizard-step-connector-style) var(--wm-wizard-step-connector-color);
10966
11097
  }
10967
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled > a,
10968
- .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled > a {
10969
- cursor: default;
11098
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.current {
11099
+ --wm-wizard-step-indicator-background: var(--wm-wizard-step-indicator-background-current);
11100
+ --wm-wizard-step-indicator-border-color: var(--wm-wizard-step-indicator-background-current);
11101
+ --wm-wizard-step-count-color: var(--wm-wizard-step-count-color-current);
11102
+ --wm-wizard-step-icon-color: var(--wm-wizard-step-icon-color-current);
10970
11103
  }
10971
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number,
10972
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
10973
- opacity: 1;
11104
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.active {
11105
+ --wm-wizard-step-indicator-background: var(--wm-wizard-step-indicator-background-active);
11106
+ --wm-wizard-step-indicator-border-color: var(--wm-wizard-step-indicator-background-active);
11107
+ --wm-wizard-step-count-color: var(--wm-wizard-step-count-color-active);
11108
+ --wm-wizard-step-icon-color: var(--wm-wizard-step-icon-color-active);
10974
11109
  }
10975
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number i {
10976
- color: var(--wm-wizard-stepper-step-icon-color);
10977
- font-size: var(--wm-wizard-stepper-step-icon-size);
11110
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.current,
11111
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
11112
+ pointer-events: none;
10978
11113
  }
10979
- .wm-app .app-wizard .app-wizard-body {
10980
- padding: var(--wm-wizard-stepper-body-padding);
10981
- height: 100%;
11114
+ .wm-app .app-wizard .app-wizard-heading .app-wizard-steps.nav-justified > .app-wizard-step {
11115
+ flex: 1;
10982
11116
  }
10983
- .wm-app .app-wizard .app-wizard-body .app-wizard-step-content {
10984
- font-family: var(--wm-wizard-stepper-body-font-family);
10985
- font-size: var(--wm-wizard-stepper-body-font-size);
10986
- font-weight: var(--wm-wizard-stepper-body-font-weight);
10987
- line-height: var(--wm-wizard-stepper-body-line-height);
10988
- letter-spacing: var(--wm-wizard-stepper-body-letter-spacing);
10989
- color: var(--wm-wizard-stepper-body-color);
11117
+ .wm-app .app-wizard .app-wizard-body {
11118
+ min-height: 50vh;
10990
11119
  }
10991
11120
  .wm-app .app-wizard .app-wizard-body .app-wizard-step-content {
10992
- display: none;
10993
- position: relative;
10994
- min-height: var(--wm-wizard-step-content-height);
10995
11121
  height: 100%;
10996
11122
  }
10997
- .wm-app .app-wizard .app-wizard-body .app-wizard-step-content.current {
10998
- display: block;
11123
+ .wm-app .app-wizard .app-wizard-body .app-wizard-step-content:not(.current) {
11124
+ display: none;
10999
11125
  }
11000
11126
  .wm-app .app-wizard .app-wizard-actions {
11001
11127
  display: flex;
11002
- justify-content: space-between;
11003
- padding: var(--wm-wizard-stepper-footer-padding);
11004
- border-top: var(--wm-wizard-stepper-footer-border-width) var(--wm-wizard-stepper-footer-border-style) var(--wm-wizard-stepper-footer-border);
11005
- background: var(--wm-wizard-stepper-footer-background);
11006
- border-radius: var(--wm-wizard-stepper-footer-radius);
11007
- }
11008
- .wm-app .app-wizard .app-wizard-actions .app-wizard-skip {
11009
- white-space: nowrap;
11010
- }
11011
- .wm-app .app-wizard .app-wizard-actions .app-wizard-actions-right {
11012
- display: flex;
11128
+ flex-direction: row;
11013
11129
  align-items: center;
11014
- gap: var(--wm-wizard-stepper-footer-actions-gap);
11015
- justify-content: flex-end;
11016
- width: 100%;
11017
- }
11018
- .wm-app .app-wizard .app-wizard-actions.left .app-wizard-actions-right {
11019
- justify-content: flex-start;
11020
- }
11021
- .wm-app .app-wizard .app-wizard-actions .app-wizard-actions-right .btn + .btn {
11022
- margin: unset;
11023
- }
11024
- .wm-app .app-wizard.number .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number {
11025
- --wm-wizard-stepper-step-current-background: var(--wm-wizard-number-stepper-step-current-background);
11026
- }
11027
- .wm-app .app-wizard.number .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
11028
- --wm-wizard-stepper-step-active-background: var(--wm-wizard-number-stepper-step-active-background);
11029
- }
11030
- .wm-app .app-wizard.number .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
11031
- --wm-wizard-stepper-step-disabled-background: var(--wm-wizard-number-stepper-step-disabled-background);
11032
11130
  }
11033
- .wm-app .app-wizard.iconstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number {
11034
- --wm-wizard-stepper-step-current-background: var(--wm-wizard-icon-stepper-step-current-background);
11131
+ .wm-app .app-wizard .app-wizard-actions .btn {
11132
+ --wm-btn-min-width: 112px;
11035
11133
  }
11036
- .wm-app .app-wizard.iconstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
11037
- --wm-wizard-stepper-step-active-background: var(--wm-wizard-icon-stepper-step-active-background);
11038
- }
11039
- .wm-app .app-wizard.iconstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
11040
- --wm-wizard-stepper-step-disabled-background: var(--wm-wizard-icon-stepper-step-disabled-background);
11041
- }
11042
- .wm-app .app-wizard.iconstepper.text-inline:not(.vertical) {
11043
- padding-top: var(--wm-wizard-icon-stepper-inline-padding-top);
11134
+ .wm-app .app-wizard .app-wizard-actions .btn .app-icon {
11135
+ display: none;
11044
11136
  }
11045
- .wm-app .app-wizard.iconstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper,
11046
- .wm-app .app-wizard.dottedstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper {
11047
- display: flex;
11048
- flex-direction: column;
11049
- align-items: center;
11050
- position: relative;
11137
+ .wm-app .app-wizard .app-wizard-actions .app-wizard-skip {
11138
+ height: fit-content;
11051
11139
  }
11052
- .wm-app .app-wizard.iconstepper.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a,
11053
- .wm-app .app-wizard.dottedstepper.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
11054
- align-items: baseline;
11140
+ .wm-app .app-wizard .app-wizard-actions:has(.app-wizard-skip) {
11141
+ gap: var(--wm-space-3);
11055
11142
  }
11056
- .wm-app .app-wizard.iconstepper.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper {
11057
- align-items: flex-start;
11058
- gap: var(--wm-wizard-vertical-icon-stepper-inline-title-wrapper-gap);
11143
+ .wm-app .app-wizard .app-wizard-actions.right {
11144
+ justify-content: flex-end;
11059
11145
  }
11060
- .wm-app .app-wizard.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:last-of-type)::before {
11061
- top: 10px;
11146
+ .wm-app .app-wizard .app-wizard-actions.right:has(.app-wizard-skip) {
11147
+ justify-content: space-between;
11148
+ gap: var(--wm-space-3);
11062
11149
  }
11063
- .wm-app .app-wizard.iconstepper.text-inline.vertical {
11064
- padding-top: unset;
11150
+ .wm-app .app-wizard.vertical {
11151
+ display: grid;
11152
+ grid-template-areas: "wizard-header wizard-main" "wizard-header wizard-main" "wizard-header wizard-footer";
11153
+ grid-template-columns: var(--wm-wizard-vertical-heading-width) 12fr;
11154
+ grid-template-rows: auto 1fr auto;
11065
11155
  }
11066
11156
  .wm-app .app-wizard.vertical .app-wizard-heading {
11157
+ border-radius: var(--wm-wizard-vertical-heading-radius);
11067
11158
  padding: var(--wm-wizard-vertical-heading-padding);
11068
- }
11069
- .wm-app .app-wizard.vertical .app-wizard-body {
11070
- padding-top: var(--wm-wizard-vertical-body-padding);
11159
+ grid-area: wizard-header;
11071
11160
  }
11072
11161
  .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps {
11073
11162
  flex-direction: column;
11074
- align-items: unset;
11075
- justify-content: flex-start;
11076
- gap: var(--wm-wizard-vertical-stepper-step-gap);
11077
- }
11078
- .wm-app .app-wizard.dottedstepper.text-inline {
11079
- padding-top: var(--wm-wizard-dotted-stepper-inline-padding);
11080
- }
11081
- .wm-app .app-wizard.dottedstepper.text-inline.vertical {
11082
- padding-top: unset;
11083
- }
11084
- .wm-app .app-wizard.dottedstepper.text-inline.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper {
11085
11163
  align-items: flex-start;
11086
- gap: var(--wm-wizard-vertical-dotted-stepper-inline-title-wrapper-gap);
11087
- position: relative;
11088
- top: 6px;
11089
- }
11090
- .wm-app .app-wizard.iconstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper span:not(.step-title) {
11091
- position: absolute;
11092
- top: -64px;
11093
- }
11094
- .wm-app .app-wizard.vertical.iconstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper span:not(.step-title),
11095
- .wm-app .app-wizard.vertical.dottedstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper span:not(.step-title) {
11096
- top: unset;
11097
- position: unset;
11098
- }
11099
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number {
11100
- width: var(--wm-wizard-dotted-stepper-step-width);
11101
- height: var(--wm-wizard-dotted-stepper-step-height);
11102
- }
11103
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
11104
- background: unset;
11105
- }
11106
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number .app-icon {
11107
- --wm-wizard-stepper-step-icon-color: var(--wm-wizard-dotted-stepper-step-current-icon-color);
11108
- --wm-wizard-stepper-step-icon-size: var(--wm-wizard-dotted-stepper-step-current-icon-size);
11109
- }
11110
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number .app-icon {
11111
- --wm-wizard-stepper-step-icon-color: var(--wm-wizard-dotted-stepper-step-active-icon-color);
11112
- --wm-wizard-stepper-step-icon-size: var(--wm-wizard-dotted-stepper-step-active-icon-size);
11113
- }
11114
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.disabled {
11115
- --wm-wizard-stepper-step-disabled-background: var(--wm-wizard-dotted-stepper-step-disabled-background);
11116
- }
11117
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current > a .wizard-step-number {
11118
- --wm-wizard-stepper-step-background: var(--wm-wizard-dotted-stepper-step-current-background);
11119
- }
11120
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.active > a .wizard-step-number {
11121
- --wm-wizard-stepper-step-background: var(--wm-wizard-dotted-stepper-step-active-background);
11122
- }
11123
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current:not(:last-of-type) > a .wizard-step-number .app-icon {
11124
- display: none;
11125
- }
11126
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:first-of-type)::before {
11127
- transform: translateY(3px);
11128
- right: calc(50% + var(--wm-wizard-dotted-stepper-step-indicator-gap));
11129
- left: calc(-50% + var(--wm-wizard-dotted-stepper-step-indicator-gap));
11130
- background: var(--wm-wizard-dotted-stepper-step-indicator-border);
11131
- height: var(--wm-wizard-dotted-stepper-step-indicator-border-height);
11132
- }
11133
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current:last-of-type > a .wizard-step-number:has(.app-icon) {
11134
- visibility: hidden;
11135
- }
11136
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current:last-of-type > a .wizard-step-number .app-icon {
11137
- visibility: visible;
11138
- }
11139
- .wm-app .app-wizard.dottedstepper.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .title-wrapper span:not(.step-title) {
11140
- top: -42px;
11141
- }
11142
- .wm-app .app-wizard.dottedstepper.app-wizard.vertical .app-wizard-heading .app-wizard-steps {
11143
- gap: var(--wm-wizard-vertical-dotted-stepper-step-gap);
11144
- }
11145
- .wm-app .app-wizard.dottedstepper.app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step {
11146
- min-height: var(--wm-wizard-vertical-dotted-stepper-step-height);
11147
- }
11148
- .wm-app .app-wizard.dottedstepper.app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step::before {
11149
- transform: translate(var(--wm-wizard-vertical-dotted-stepper-step-transform-x), var(--wm-wizard-vertical-dotted-stepper-step-transform-y));
11150
- top: var(--wm-wizard-vertical-dotted-stepper-step-top-offset-default);
11151
- }
11152
- .wm-app .app-wizard.dottedstepper.app-wizard.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step::before {
11153
- top: var(--wm-wizard-vertical-dotted-stepper-step-top-offset-inline);
11154
- }
11155
- .wm-app .app-wizard.classic .app-wizard-heading {
11156
- padding: var(--wm-wizard-classic-wizard-heading-padding);
11157
- }
11158
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps {
11159
- gap: var(--wm-wizard-classic-wizard-stepper-steps-gap);
11160
- }
11161
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step::after,
11162
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step::before {
11163
- display: none;
11164
- }
11165
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a {
11166
- gap: unset;
11167
- width: 100%;
11168
- }
11169
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .wizard-step-number {
11170
- display: none;
11171
- }
11172
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .title-wrapper {
11173
- position: relative;
11174
- cursor: default;
11175
- padding: var(--wm-wizard-classic-wizard-title-wrapper-padding);
11176
- background: var(--wm-wizard-classic-wizard-title-wrapper-background);
11177
- user-select: none;
11178
- transition: background 0.2s ease;
11179
- width: 100%;
11180
- }
11181
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.current > a .title-wrapper {
11182
- background: var(--wm-wizard-classic-wizard-title-wrapper-current-background);
11183
- }
11184
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.current > a .title-wrapper .step-title {
11185
- --wm-wizard-stepper-step-title-color: var(--wm-wizard-classic-wizard-title-wrapper-current-color);
11186
- }
11187
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.active > a .title-wrapper {
11188
- background: var(--wm-wizard-classic-wizard-title-wrapper-active-background);
11189
- }
11190
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.active > a .title-wrapper .step-title {
11191
- --wm-wizard-stepper-step-title-color: var(--wm-wizard-classic-wizard-title-wrapper-active-color);
11192
- }
11193
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.disabled {
11194
- opacity: unset;
11195
- }
11196
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.disabled > a .title-wrapper .step-title {
11197
- opacity: var(--wm-wizard-classic-wizard-step-title-disabled-color);
11198
- }
11199
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.current > a .title-wrapper::after {
11200
- border-left: var(--wm-wizard-classic-wizard-title-wrapper-border-left) var(--wm-wizard-classic-wizard-title-wrapper-border-style) var(--wm-wizard-classic-wizard-title-wrapper-current-background);
11201
- }
11202
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step.active > a .title-wrapper::after {
11203
- border-left: var(--wm-wizard-classic-wizard-title-wrapper-border-left) var(--wm-wizard-classic-wizard-title-wrapper-border-style) var(--wm-wizard-classic-wizard-title-wrapper-active-background);
11204
- }
11205
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .title-wrapper::before,
11206
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .title-wrapper::after {
11207
- content: " ";
11208
- position: absolute;
11209
- top: 0;
11210
- right: -17px;
11211
- width: 0;
11212
- height: 0;
11213
- border-top: var(--wm-wizard-classic-wizard-title-wrapper-border-top-size) var(--wm-wizard-classic-wizard-title-wrapper-border-style) transparent;
11214
- border-bottom: var(--wm-wizard-classic-wizard-title-wrapper-border-bottom-size) var(--wm-wizard-classic-wizard-title-wrapper-border-style) transparent;
11215
- border-left: var(--wm-wizard-classic-wizard-title-wrapper-border-left) var(--wm-wizard-classic-wizard-title-wrapper-border-style) var(--wm-wizard-classic-wizard-title-wrapper-background);
11216
- z-index: 2;
11217
- transition: border-color 0.2s ease;
11218
- }
11219
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps .app-wizard-step > a .title-wrapper::before {
11220
- right: auto;
11221
- left: 0;
11222
- border-left: var(--wm-wizard-classic-wizard-title-wrapper-border-left) var(--wm-wizard-classic-wizard-title-wrapper-border-style) var(--wm-wizard-classic-wizard-title-border-white-color);
11223
- z-index: 0;
11224
- }
11225
- .wm-app .app-wizard.classic .app-wizard-steps .app-wizard-step:first-child .title-wrapper {
11226
- border-top-left-radius: var(--wm-wizard-classic-wizard-title-wrapper-border-radius);
11227
- border-bottom-left-radius: var(--wm-wizard-classic-wizard-title-wrapper-border-radius);
11228
- }
11229
- .wm-app .app-wizard.classic .app-wizard-steps .app-wizard-step:last-child .title-wrapper {
11230
- border-top-right-radius: var(--wm-wizard-classic-wizard-title-wrapper-border-radius);
11231
- border-bottom-right-radius: var(--wm-wizard-classic-wizard-title-wrapper-border-radius);
11232
- margin: unset;
11233
- }
11234
- .wm-app .app-wizard.classic .title-wrapper .step-title {
11235
- position: relative;
11236
- }
11237
- .wm-app .app-wizard.classic .app-wizard-steps .app-wizard-step:first-child .title-wrapper::before {
11238
- border: none !important;
11239
- }
11240
- .wm-app .app-wizard.classic .app-wizard-steps .app-wizard-step:last-child .title-wrapper::after {
11241
- border: none !important;
11242
- }
11243
- .wm-app .app-wizard.vertical {
11244
- display: grid;
11245
- grid-template-columns: var(--wm-wizard-vertical-grid-columns);
11246
11164
  }
11247
- .wm-app .app-wizard.vertical .app-wizard-heading {
11248
- border-right: var(--wm-wizard-vertical-heading-border-width) var(--wm-wizard-vertical-heading-border-style) var(--wm-wizard-vertical-heading-border);
11165
+ .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps .app-wizard-step {
11166
+ flex-direction: column;
11167
+ align-items: flex-start;
11249
11168
  }
11250
- .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step {
11251
- position: relative;
11169
+ .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps .app-wizard-step:not(:last-of-type):after {
11170
+ width: 0px;
11171
+ height: var(--wm-wizard-vertical-connector-height);
11172
+ border-right: var(--wm-wizard-step-connector-width) var(--wm-wizard-step-connector-style) var(--wm-wizard-step-connector-color);
11173
+ left: calc(var(--wm-wizard-step-indicator-size)* 0.5);
11252
11174
  }
11253
- .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:last-of-type)::before {
11254
- position: absolute;
11255
- content: "";
11175
+ .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps.nav-justified {
11256
11176
  height: 100%;
11257
- width: var(--wm-wizard-vertical-stepper-step-indicator-border-width);
11258
- background: var(--wm-wizard-vertical-stepper-step-indicator-background-border);
11259
- left: unset;
11260
- right: unset;
11261
- top: calc(100% - 35%);
11262
- transform: translate(var(--wm-wizard-vertical-stepper-step-indicator-transform-x), var(--wm-wizard-vertical-stepper-step-indicator-transform-y));
11263
- }
11264
- .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step.current::before {
11265
- opacity: var(--wm-wizard-vertical-stepper-step-disabled-background);
11266
- }
11267
- .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step:last-of-type::before {
11268
- display: none;
11269
- }
11270
- .wm-app .app-wizard.vertical .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
11271
- flex-direction: row;
11272
- justify-content: flex-start;
11273
- }
11274
- .wm-app .app-wizard.panel.clearfix.vertical::before {
11275
- display: none;
11177
+ --wm-wizard-vertical-connector-height: 100%;
11276
11178
  }
11277
- .wm-app .app-wizard-steps.nav.nav-pills::before {
11278
- display: none;
11279
- }
11280
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number {
11281
- min-width: var(--wm-wizard-stepper-step-width);
11179
+ .wm-app .app-wizard.vertical .app-wizard-body {
11180
+ grid-area: wizard-main;
11282
11181
  }
11283
11182
  .wm-app .app-wizard.vertical .app-wizard-actions {
11284
- grid-column: -1 / 1;
11285
- }
11286
- .wm-app .app-wizard.vertical.text-inline .app-wizard-heading .app-wizard-steps > .app-wizard-step:not(:last-of-type)::before {
11287
- top: 14px;
11288
- }
11289
- .wm-app .app-wizard.classic .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
11290
- padding: 0;
11183
+ grid-area: wizard-footer;
11291
11184
  }
11292
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a:is(:hover, :focus) {
11293
- background: transparent;
11294
- }
11295
- .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number {
11296
- min-width: var(--wm-wizard-dotted-stepper-step-width);
11185
+ .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step > a .wizard-step-number .dottedstepper {
11186
+ width: var(--wm-wizard-step-dotted-size);
11187
+ height: var(--wm-wizard-step-dotted-size);
11188
+ border-radius: 50%;
11189
+ background: var(--wm-wizard-step-indicator-border-color);
11297
11190
  }
11298
- .wm-app .app-wizard .app-wizard-heading .app-wizard-steps > .app-wizard-step > a {
11299
- padding: 0;
11191
+ .wm-app .app-wizard.dottedstepper .app-wizard-heading .app-wizard-steps > .app-wizard-step.current:has(>a .wizard-step-number .dottedstepper) {
11192
+ --wm-wizard-step-indicator-background: none;
11300
11193
  }
11301
11194
  .wm-app .app-richtexteditor {
11302
11195
  position: relative;
@@ -17310,9 +17203,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
17310
17203
  -webkit-font-smoothing: antialiased;
17311
17204
  -moz-osx-font-smoothing: grayscale;
17312
17205
  }
17313
- .icon-preview > span {
17314
- line-height: unset;
17315
- }
17316
17206
  .fa-fw {
17317
17207
  width: 1.28571429em;
17318
17208
  }
@@ -24853,3 +24743,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
24853
24743
  .wm-studio .workspace-content .wm-property-container .wm-dependencies .tab-content .properties-list .app-radioset {
24854
24744
  overflow: auto;
24855
24745
  }
24746
+ .wm-studio .icon-preview > span {
24747
+ line-height: unset;
24748
+ }