@incursa/ui-kit 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI-AGENT-INSTRUCTIONS.md +10 -2
- package/LLMS.txt +5 -3
- package/dist/inc-design-language.css +244 -14
- package/dist/inc-design-language.css.map +1 -1
- package/dist/inc-design-language.min.css +1 -1
- package/dist/inc-design-language.min.css.map +1 -1
- package/dist/web-components/index.js +3 -2
- package/package.json +1 -1
- package/src/inc-design-language.scss +260 -14
- package/src/web-components/index.js +3 -2
|
@@ -18,6 +18,18 @@
|
|
|
18
18
|
--inc-text-inverse-rgb: 255, 255, 255;
|
|
19
19
|
--inc-text-link: var(--bs-link-color);
|
|
20
20
|
--inc-text-link-hover: var(--bs-link-hover-color);
|
|
21
|
+
--inc-control-surface: var(--inc-surface-primary);
|
|
22
|
+
--inc-control-surface-text: var(--inc-text-primary);
|
|
23
|
+
--inc-control-surface-border: var(--inc-border-default);
|
|
24
|
+
--inc-surface-contrast: var(--bs-secondary);
|
|
25
|
+
--inc-surface-contrast-rgb: var(--bs-secondary-rgb);
|
|
26
|
+
--inc-surface-contrast-hover: #31384a;
|
|
27
|
+
--inc-surface-contrast-hover-rgb: 49, 56, 74;
|
|
28
|
+
--inc-surface-contrast-active: #2e3542;
|
|
29
|
+
--inc-surface-contrast-active-rgb: 46, 53, 66;
|
|
30
|
+
--inc-surface-contrast-text: var(--inc-text-inverse);
|
|
31
|
+
--inc-surface-contrast-text-rgb: var(--inc-text-inverse-rgb);
|
|
32
|
+
--inc-surface-contrast-border: var(--bs-secondary);
|
|
21
33
|
--inc-surface-primary-rgb: var(--bs-body-bg-rgb);
|
|
22
34
|
--inc-surface-secondary-rgb: var(--bs-secondary-bg-rgb);
|
|
23
35
|
--inc-surface-muted-rgb: var(--bs-tertiary-bg-rgb);
|
|
@@ -27,6 +39,31 @@
|
|
|
27
39
|
--inc-shadow-rgb: var(--bs-black-rgb);
|
|
28
40
|
}
|
|
29
41
|
|
|
42
|
+
[data-bs-theme="dark"] {
|
|
43
|
+
--inc-control-surface: var(--inc-surface-secondary);
|
|
44
|
+
--inc-control-surface-text: var(--inc-text-primary);
|
|
45
|
+
--inc-control-surface-border: var(--inc-border-default);
|
|
46
|
+
--inc-surface-contrast: var(--bs-gray-100);
|
|
47
|
+
--inc-surface-contrast-rgb: 253, 253, 253;
|
|
48
|
+
--inc-surface-contrast-hover: var(--bs-gray-200);
|
|
49
|
+
--inc-surface-contrast-hover-rgb: 246, 246, 246;
|
|
50
|
+
--inc-surface-contrast-active: var(--bs-gray-300);
|
|
51
|
+
--inc-surface-contrast-active-rgb: 241, 241, 241;
|
|
52
|
+
--inc-surface-contrast-text: var(--bs-dark);
|
|
53
|
+
--inc-surface-contrast-text-rgb: 18, 19, 22;
|
|
54
|
+
--inc-surface-contrast-border: var(--bs-gray-400);
|
|
55
|
+
--bs-success-bg-subtle: rgba(0, 151, 67, 0.18);
|
|
56
|
+
--bs-success-border-subtle: rgb(72, 171, 109);
|
|
57
|
+
--bs-form-valid-color: rgb(122, 214, 154);
|
|
58
|
+
--bs-form-valid-border-color: rgb(122, 214, 154);
|
|
59
|
+
--bs-danger-bg-subtle: rgba(209, 26, 42, 0.18);
|
|
60
|
+
--bs-danger-border-subtle: rgb(219, 89, 105);
|
|
61
|
+
--bs-form-invalid-color: rgb(248, 126, 143);
|
|
62
|
+
--bs-form-invalid-border-color: rgb(248, 126, 143);
|
|
63
|
+
--bs-warning-bg-subtle: rgba(200, 138, 0, 0.18);
|
|
64
|
+
--bs-warning-border-subtle: rgb(214, 160, 41);
|
|
65
|
+
}
|
|
66
|
+
|
|
30
67
|
// -----------------------------------------------------------------------------
|
|
31
68
|
// Typography
|
|
32
69
|
// -----------------------------------------------------------------------------
|
|
@@ -417,6 +454,19 @@
|
|
|
417
454
|
|
|
418
455
|
&--secondary {
|
|
419
456
|
@extend .btn-secondary;
|
|
457
|
+
--bs-btn-color: var(--inc-surface-contrast-text);
|
|
458
|
+
--bs-btn-bg: var(--inc-surface-contrast);
|
|
459
|
+
--bs-btn-border-color: var(--inc-surface-contrast-border);
|
|
460
|
+
--bs-btn-hover-color: var(--inc-surface-contrast-text);
|
|
461
|
+
--bs-btn-hover-bg: var(--inc-surface-contrast-hover);
|
|
462
|
+
--bs-btn-hover-border-color: var(--inc-surface-contrast-border);
|
|
463
|
+
--bs-btn-focus-shadow-rgb: var(--inc-surface-contrast-rgb);
|
|
464
|
+
--bs-btn-active-color: var(--inc-surface-contrast-text);
|
|
465
|
+
--bs-btn-active-bg: var(--inc-surface-contrast-active);
|
|
466
|
+
--bs-btn-active-border-color: var(--inc-surface-contrast-border);
|
|
467
|
+
--bs-btn-disabled-color: var(--inc-surface-contrast-text);
|
|
468
|
+
--bs-btn-disabled-bg: var(--inc-surface-contrast);
|
|
469
|
+
--bs-btn-disabled-border-color: var(--inc-surface-contrast-border);
|
|
420
470
|
}
|
|
421
471
|
|
|
422
472
|
&--success {
|
|
@@ -459,6 +509,17 @@
|
|
|
459
509
|
|
|
460
510
|
&--outline-secondary {
|
|
461
511
|
@extend .btn-outline-secondary;
|
|
512
|
+
--bs-btn-color: var(--inc-text-primary);
|
|
513
|
+
--bs-btn-border-color: var(--inc-border-default);
|
|
514
|
+
--bs-btn-hover-color: var(--inc-text-primary);
|
|
515
|
+
--bs-btn-hover-bg: var(--inc-surface-secondary);
|
|
516
|
+
--bs-btn-hover-border-color: var(--inc-border-default);
|
|
517
|
+
--bs-btn-focus-shadow-rgb: var(--inc-surface-strong-rgb);
|
|
518
|
+
--bs-btn-active-color: var(--inc-text-primary);
|
|
519
|
+
--bs-btn-active-bg: var(--inc-surface-muted);
|
|
520
|
+
--bs-btn-active-border-color: var(--inc-border-default);
|
|
521
|
+
--bs-btn-disabled-color: var(--inc-text-muted);
|
|
522
|
+
--bs-btn-disabled-border-color: var(--inc-border-subtle);
|
|
462
523
|
}
|
|
463
524
|
|
|
464
525
|
&--outline-success {
|
|
@@ -631,6 +692,9 @@
|
|
|
631
692
|
|
|
632
693
|
&__control {
|
|
633
694
|
@extend .form-control;
|
|
695
|
+
color: var(--inc-control-surface-text);
|
|
696
|
+
background-color: var(--inc-control-surface);
|
|
697
|
+
border-color: var(--inc-control-surface-border);
|
|
634
698
|
|
|
635
699
|
&--sm {
|
|
636
700
|
@extend .form-control-sm;
|
|
@@ -666,6 +730,9 @@
|
|
|
666
730
|
|
|
667
731
|
&__select {
|
|
668
732
|
@extend .form-select;
|
|
733
|
+
color: var(--inc-control-surface-text);
|
|
734
|
+
background-color: var(--inc-control-surface);
|
|
735
|
+
border-color: var(--inc-control-surface-border);
|
|
669
736
|
|
|
670
737
|
&--sm {
|
|
671
738
|
@extend .form-select-sm;
|
|
@@ -724,7 +791,7 @@
|
|
|
724
791
|
padding: 1rem 1rem 0.875rem;
|
|
725
792
|
border: 1px solid var(--inc-border-subtle);
|
|
726
793
|
border-radius: $inc-radius-md;
|
|
727
|
-
background:
|
|
794
|
+
background: var(--inc-surface-secondary);
|
|
728
795
|
}
|
|
729
796
|
|
|
730
797
|
&__legend {
|
|
@@ -732,6 +799,7 @@
|
|
|
732
799
|
width: auto;
|
|
733
800
|
margin: 0;
|
|
734
801
|
padding: 0 0.375rem;
|
|
802
|
+
background-color: var(--inc-surface-secondary);
|
|
735
803
|
color: var(--inc-text-primary);
|
|
736
804
|
font-size: 0.8125rem;
|
|
737
805
|
font-weight: 600;
|
|
@@ -971,9 +1039,10 @@
|
|
|
971
1039
|
justify-content: center;
|
|
972
1040
|
text-align: center;
|
|
973
1041
|
padding: $spacer * 2 $spacer * 1.5;
|
|
974
|
-
border: $border-width solid
|
|
1042
|
+
border: $border-width solid var(--inc-border-subtle);
|
|
975
1043
|
border-radius: $inc-radius-panel;
|
|
976
|
-
background-color:
|
|
1044
|
+
background-color: var(--inc-surface-secondary);
|
|
1045
|
+
color: var(--inc-text-primary);
|
|
977
1046
|
min-height: 21.875rem;
|
|
978
1047
|
|
|
979
1048
|
&__content {
|
|
@@ -984,7 +1053,7 @@
|
|
|
984
1053
|
&__icon {
|
|
985
1054
|
font-size: $font-size-base * 3.5;
|
|
986
1055
|
margin-bottom: $spacer * 1.5;
|
|
987
|
-
color:
|
|
1056
|
+
color: var(--inc-text-muted);
|
|
988
1057
|
}
|
|
989
1058
|
|
|
990
1059
|
&__form {
|
|
@@ -1393,7 +1462,7 @@
|
|
|
1393
1462
|
&__header {
|
|
1394
1463
|
padding: 1rem;
|
|
1395
1464
|
border-bottom: 1px solid var(--bs-border-color);
|
|
1396
|
-
background-color: var(--
|
|
1465
|
+
background-color: var(--inc-surface-secondary);
|
|
1397
1466
|
display: flex;
|
|
1398
1467
|
align-items: center;
|
|
1399
1468
|
justify-content: space-between;
|
|
@@ -2557,10 +2626,10 @@ details.inc-native-menu.inc-native-menu--navbar {
|
|
|
2557
2626
|
align-items: center;
|
|
2558
2627
|
justify-content: center;
|
|
2559
2628
|
flex: 0 0 auto;
|
|
2560
|
-
background-color:
|
|
2561
|
-
color:
|
|
2629
|
+
background-color: var(--bs-primary-bg-subtle);
|
|
2630
|
+
color: var(--bs-primary-text-emphasis);
|
|
2562
2631
|
font-size: 0.75rem;
|
|
2563
|
-
font-weight:
|
|
2632
|
+
font-weight: 700;
|
|
2564
2633
|
line-height: 1;
|
|
2565
2634
|
}
|
|
2566
2635
|
|
|
@@ -2614,7 +2683,7 @@ details.inc-native-menu.inc-native-menu--block > .inc-native-menu__summary {
|
|
|
2614
2683
|
justify-content: flex-start;
|
|
2615
2684
|
min-height: 3rem;
|
|
2616
2685
|
padding: 0.625rem 0.75rem;
|
|
2617
|
-
background:
|
|
2686
|
+
background-color: var(--inc-surface-secondary);
|
|
2618
2687
|
}
|
|
2619
2688
|
|
|
2620
2689
|
details.inc-native-menu.inc-native-menu--block > .inc-native-menu__panel {
|
|
@@ -4562,6 +4631,19 @@ body.inc-offcanvas-open {
|
|
|
4562
4631
|
display: none;
|
|
4563
4632
|
}
|
|
4564
4633
|
|
|
4634
|
+
> .inc-spinner {
|
|
4635
|
+
position: absolute;
|
|
4636
|
+
inset: 50% auto auto 50%;
|
|
4637
|
+
margin: -0.5rem 0 0 -0.5rem;
|
|
4638
|
+
transform: none;
|
|
4639
|
+
}
|
|
4640
|
+
|
|
4641
|
+
> .inc-loading-dots {
|
|
4642
|
+
position: absolute;
|
|
4643
|
+
inset: 50% auto auto 50%;
|
|
4644
|
+
transform: translate(-50%, -50%);
|
|
4645
|
+
}
|
|
4646
|
+
|
|
4565
4647
|
&::after {
|
|
4566
4648
|
content: "";
|
|
4567
4649
|
position: absolute;
|
|
@@ -4574,12 +4656,176 @@ body.inc-offcanvas-open {
|
|
|
4574
4656
|
border-right-color: transparent;
|
|
4575
4657
|
animation: inc-loading-spin 0.8s linear infinite;
|
|
4576
4658
|
}
|
|
4659
|
+
}
|
|
4577
4660
|
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4661
|
+
[data-bs-theme="dark"] {
|
|
4662
|
+
.form-control,
|
|
4663
|
+
.inc-readonly-field,
|
|
4664
|
+
.inc-form__control {
|
|
4665
|
+
color: var(--inc-control-surface-text);
|
|
4666
|
+
background-color: var(--inc-control-surface);
|
|
4667
|
+
border-color: var(--inc-control-surface-border);
|
|
4668
|
+
}
|
|
4669
|
+
|
|
4670
|
+
.form-control:focus,
|
|
4671
|
+
.inc-readonly-field:focus,
|
|
4672
|
+
.inc-form__control:focus {
|
|
4673
|
+
color: var(--inc-control-surface-text);
|
|
4674
|
+
background-color: var(--inc-control-surface);
|
|
4675
|
+
}
|
|
4676
|
+
|
|
4677
|
+
.form-control::placeholder,
|
|
4678
|
+
.inc-readonly-field::placeholder,
|
|
4679
|
+
.inc-form__control::placeholder {
|
|
4680
|
+
color: var(--bs-secondary-color);
|
|
4681
|
+
}
|
|
4682
|
+
|
|
4683
|
+
.form-control::file-selector-button,
|
|
4684
|
+
.inc-readonly-field::file-selector-button,
|
|
4685
|
+
.inc-form__control::file-selector-button {
|
|
4686
|
+
color: var(--inc-control-surface-text);
|
|
4687
|
+
background-color: var(--inc-surface-muted);
|
|
4688
|
+
}
|
|
4689
|
+
|
|
4690
|
+
.form-control:hover:not(:disabled):not([readonly])::file-selector-button,
|
|
4691
|
+
.inc-readonly-field:hover:not(:disabled):not([readonly])::file-selector-button,
|
|
4692
|
+
.inc-form__control:hover:not(:disabled):not([readonly])::file-selector-button {
|
|
4693
|
+
background-color: var(--inc-surface-secondary);
|
|
4694
|
+
}
|
|
4695
|
+
|
|
4696
|
+
.form-select,
|
|
4697
|
+
.inc-form__select {
|
|
4698
|
+
color: var(--inc-control-surface-text);
|
|
4699
|
+
background-color: var(--inc-control-surface);
|
|
4700
|
+
border-color: var(--inc-control-surface-border);
|
|
4701
|
+
}
|
|
4702
|
+
|
|
4703
|
+
.form-select:focus,
|
|
4704
|
+
.inc-form__select:focus {
|
|
4705
|
+
color: var(--inc-control-surface-text);
|
|
4706
|
+
background-color: var(--inc-control-surface);
|
|
4707
|
+
}
|
|
4708
|
+
|
|
4709
|
+
.form-select:-moz-focusring,
|
|
4710
|
+
.inc-form__select:-moz-focusring {
|
|
4711
|
+
color: transparent;
|
|
4712
|
+
text-shadow: 0 0 0 var(--inc-control-surface-text);
|
|
4713
|
+
}
|
|
4714
|
+
|
|
4715
|
+
.input-group-text,
|
|
4716
|
+
.inc-input-group__text {
|
|
4717
|
+
color: var(--inc-surface-contrast-text);
|
|
4718
|
+
background-color: var(--inc-surface-contrast);
|
|
4719
|
+
border-color: var(--inc-surface-contrast-border);
|
|
4720
|
+
}
|
|
4721
|
+
|
|
4722
|
+
.inc-btn--secondary {
|
|
4723
|
+
--bs-btn-color: var(--inc-surface-contrast-text);
|
|
4724
|
+
--bs-btn-bg: var(--inc-surface-contrast);
|
|
4725
|
+
--bs-btn-border-color: var(--inc-surface-contrast-border);
|
|
4726
|
+
--bs-btn-hover-color: var(--inc-surface-contrast-text);
|
|
4727
|
+
--bs-btn-hover-bg: var(--inc-surface-contrast-hover);
|
|
4728
|
+
--bs-btn-hover-border-color: var(--inc-surface-contrast-border);
|
|
4729
|
+
--bs-btn-focus-shadow-rgb: var(--inc-surface-contrast-rgb);
|
|
4730
|
+
--bs-btn-active-color: var(--inc-surface-contrast-text);
|
|
4731
|
+
--bs-btn-active-bg: var(--inc-surface-contrast-active);
|
|
4732
|
+
--bs-btn-active-border-color: var(--inc-surface-contrast-border);
|
|
4733
|
+
--bs-btn-disabled-color: var(--inc-surface-contrast-text);
|
|
4734
|
+
--bs-btn-disabled-bg: var(--inc-surface-contrast);
|
|
4735
|
+
--bs-btn-disabled-border-color: var(--inc-surface-contrast-border);
|
|
4736
|
+
}
|
|
4737
|
+
|
|
4738
|
+
.inc-form__fieldset {
|
|
4739
|
+
background: var(--inc-surface-secondary);
|
|
4740
|
+
}
|
|
4741
|
+
|
|
4742
|
+
.inc-form__legend {
|
|
4743
|
+
background-color: var(--inc-surface-secondary);
|
|
4744
|
+
}
|
|
4745
|
+
|
|
4746
|
+
.inc-form__control.is-invalid,
|
|
4747
|
+
.inc-form__control[aria-invalid="true"],
|
|
4748
|
+
.inc-form__select.is-invalid {
|
|
4749
|
+
border-color: var(--bs-form-invalid-border-color);
|
|
4750
|
+
}
|
|
4751
|
+
|
|
4752
|
+
.inc-form__control.is-valid,
|
|
4753
|
+
.inc-form__select.is-valid {
|
|
4754
|
+
border-color: var(--bs-form-valid-border-color);
|
|
4755
|
+
}
|
|
4756
|
+
|
|
4757
|
+
.was-validated .form-control:invalid,
|
|
4758
|
+
.was-validated .inc-readonly-field:invalid,
|
|
4759
|
+
.was-validated .inc-form__control:invalid,
|
|
4760
|
+
.form-control.is-invalid,
|
|
4761
|
+
.is-invalid.inc-readonly-field,
|
|
4762
|
+
.form-control.inc-form--is-invalid,
|
|
4763
|
+
.inc-form--is-invalid.inc-readonly-field,
|
|
4764
|
+
.is-invalid.inc-form__control,
|
|
4765
|
+
.inc-form__control.inc-form--is-invalid {
|
|
4766
|
+
border-color: var(--bs-form-invalid-border-color);
|
|
4767
|
+
}
|
|
4768
|
+
|
|
4769
|
+
.was-validated .form-select:invalid,
|
|
4770
|
+
.was-validated .inc-form__select:invalid,
|
|
4771
|
+
.form-select.is-invalid,
|
|
4772
|
+
.form-select.inc-form--is-invalid,
|
|
4773
|
+
.is-invalid.inc-form__select,
|
|
4774
|
+
.inc-form__select.inc-form--is-invalid {
|
|
4775
|
+
border-color: var(--bs-form-invalid-border-color);
|
|
4776
|
+
}
|
|
4777
|
+
|
|
4778
|
+
.was-validated .form-control:invalid:focus,
|
|
4779
|
+
.was-validated .inc-readonly-field:invalid:focus,
|
|
4780
|
+
.was-validated .inc-form__control:invalid:focus,
|
|
4781
|
+
.form-control.is-invalid:focus,
|
|
4782
|
+
.is-invalid.inc-readonly-field:focus,
|
|
4783
|
+
.form-control.inc-form--is-invalid:focus,
|
|
4784
|
+
.inc-form--is-invalid.inc-readonly-field:focus,
|
|
4785
|
+
.is-invalid.inc-form__control:focus,
|
|
4786
|
+
.inc-form__control.inc-form--is-invalid:focus {
|
|
4787
|
+
border-color: var(--bs-form-invalid-border-color);
|
|
4788
|
+
box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
|
|
4789
|
+
}
|
|
4790
|
+
|
|
4791
|
+
.was-validated .form-select:invalid:focus,
|
|
4792
|
+
.was-validated .inc-form__select:invalid:focus,
|
|
4793
|
+
.form-select.is-invalid:focus,
|
|
4794
|
+
.form-select.inc-form--is-invalid:focus,
|
|
4795
|
+
.is-invalid.inc-form__select:focus,
|
|
4796
|
+
.inc-form__select.inc-form--is-invalid:focus {
|
|
4797
|
+
border-color: var(--bs-form-invalid-border-color);
|
|
4798
|
+
box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
|
|
4799
|
+
}
|
|
4800
|
+
|
|
4801
|
+
.inc-table__row--selected,
|
|
4802
|
+
.inc-table__row--warning,
|
|
4803
|
+
.inc-table__row--danger {
|
|
4804
|
+
--bs-table-color: var(--inc-text-primary);
|
|
4805
|
+
}
|
|
4806
|
+
|
|
4807
|
+
.inc-table__row--locked {
|
|
4808
|
+
--bs-table-color: var(--inc-text-secondary);
|
|
4809
|
+
}
|
|
4810
|
+
|
|
4811
|
+
.inc-table__row--selected > *,
|
|
4812
|
+
.inc-table__row--warning > *,
|
|
4813
|
+
.inc-table__row--danger > * {
|
|
4814
|
+
background: rgba(var(--bs-primary-rgb), 0.14) !important;
|
|
4815
|
+
color: var(--inc-text-primary);
|
|
4816
|
+
}
|
|
4817
|
+
|
|
4818
|
+
.inc-table__row--warning > * {
|
|
4819
|
+
background: rgba(var(--bs-warning-rgb), 0.14) !important;
|
|
4820
|
+
}
|
|
4821
|
+
|
|
4822
|
+
.inc-table__row--danger > * {
|
|
4823
|
+
background: rgba(var(--bs-danger-rgb), 0.14) !important;
|
|
4824
|
+
}
|
|
4825
|
+
|
|
4826
|
+
.inc-table__row--locked > * {
|
|
4827
|
+
background: rgba(var(--bs-secondary-rgb), 0.22) !important;
|
|
4828
|
+
color: var(--inc-text-secondary);
|
|
4583
4829
|
}
|
|
4584
4830
|
}
|
|
4585
4831
|
|
|
@@ -753,18 +753,19 @@ class IncDialogBaseElement extends IncElement {
|
|
|
753
753
|
const dialog = ensureNode(this, "dialog.inc-native-dialog", () => {
|
|
754
754
|
const node = document.createElement("dialog");
|
|
755
755
|
node.className = "inc-native-dialog";
|
|
756
|
-
node.innerHTML = `<div class="inc-native-dialog__surface"><div class="inc-native-dialog__header"><h2 class="inc-native-dialog__title">${this.getAttribute("label") || "Dialog"}</h2><button type="button" class="inc-native-dialog__close" data-inc-dialog-close aria-label="Close dialog">×</button></div><div class="inc-native-dialog__body"></div><div class="inc-native-dialog__footer"></div></div>`;
|
|
756
|
+
node.innerHTML = `<div class="inc-native-dialog__surface"><div class="inc-native-dialog__header"><div class="inc-native-dialog__titles"><h2 class="inc-native-dialog__title">${this.getAttribute("label") || "Dialog"}</h2></div><button type="button" class="inc-native-dialog__close" data-inc-dialog-close aria-label="Close dialog">×</button></div><div class="inc-native-dialog__body"></div><div class="inc-native-dialog__footer"></div></div>`;
|
|
757
757
|
this.append(node);
|
|
758
758
|
return node;
|
|
759
759
|
});
|
|
760
760
|
dialog.classList.toggle("inc-native-dialog--drawer", drawerMode);
|
|
761
761
|
this._dialog = dialog;
|
|
762
762
|
this._header = dialog.querySelector(".inc-native-dialog__header");
|
|
763
|
+
this._titles = dialog.querySelector(".inc-native-dialog__titles");
|
|
763
764
|
this._body = dialog.querySelector(".inc-native-dialog__body");
|
|
764
765
|
this._footer = dialog.querySelector(".inc-native-dialog__footer");
|
|
765
766
|
Array.from(this.children).filter((node) => node.getAttribute("slot") === "header" || node.getAttribute("slot") === "title").forEach((node) => {
|
|
766
767
|
node.removeAttribute("slot");
|
|
767
|
-
this._header.append(node);
|
|
768
|
+
(this._titles || this._header).append(node);
|
|
768
769
|
});
|
|
769
770
|
Array.from(this.children).filter((node) => node.getAttribute("slot") === "body").forEach((node) => {
|
|
770
771
|
node.removeAttribute("slot");
|