@casinogate/ui 1.8.2 → 1.8.4

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 (9) hide show
  1. package/dist/assets/css/root.css +195 -128
  2. package/dist/assets/css/theme.css +25 -3
  3. package/dist/components/dialog/_ui/nested-dialog/nested-dialog.svelte +9 -8
  4. package/dist/components/dialog/dialog-host-item.svelte +31 -3
  5. package/dist/components/dialog/index.d.ts +1 -1
  6. package/dist/components/dialog/model/dialog-manager.svelte.js +11 -13
  7. package/dist/components/dialog/styles.js +1 -1
  8. package/dist/components/dialog/types.d.ts +8 -1
  9. package/package.json +1 -1
package/dist/assets/css/root.css CHANGED
@@ -7,7 +7,6 @@
7
7
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
8
  --cgui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
9
  "Courier New", monospace;
10
- --cgui-color-black: #000;
11
10
  --cgui-spacing: 0.25rem;
12
11
  --cgui-text-xs: 0.75rem;
13
12
  --cgui-text-xs--line-height: calc(1 / 0.75);
@@ -28,6 +27,71 @@
28
27
  --cgui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
29
28
  --cgui-default-font-family: var(--cgui-font-sans);
30
29
  --cgui-default-mono-font-family: var(--cgui-font-mono);
30
+ --cgui-color-primary-100: var(--cg-ui-palette-primary-100);
31
+ --cgui-color-primary-80: var(--cg-ui-palette-primary-80);
32
+ --cgui-color-primary-60: var(--cg-ui-palette-primary-60);
33
+ --cgui-color-primary-10: var(--cg-ui-palette-primary-10);
34
+ --cgui-color-neutral-40: var(--cg-ui-palette-neutral-40);
35
+ --cgui-color-neutral-20: var(--cg-ui-palette-neutral-20);
36
+ --cgui-color-neutral-10: var(--cg-ui-palette-neutral-10);
37
+ --cgui-color-neutral-0: var(--cg-ui-palette-neutral-0);
38
+ --cgui-color-surface-primary: var(--cg-ui-palette-primary-80);
39
+ --cgui-color-surface-primary-active: var(--cg-ui-palette-primary-60);
40
+ --cgui-color-surface-primary-light: var(--cg-ui-palette-primary-40);
41
+ --cgui-color-surface-darkest: var(--cg-ui-palette-neutral-100);
42
+ --cgui-color-surface-regular: var(--cg-ui-palette-neutral-50);
43
+ --cgui-color-surface-light: var(--cg-ui-palette-neutral-20);
44
+ --cgui-color-surface-lightest: var(--cg-ui-palette-neutral-10);
45
+ --cgui-color-surface-white: var(--cg-ui-palette-neutral-0);
46
+ --cgui-color-surface-hover: var(--cg-ui-palette-neutral-01);
47
+ --cgui-color-bg-main: var(--cg-ui-palette-neutral-20);
48
+ --cgui-color-fg-darkest: var(--cg-ui-palette-neutral-100);
49
+ --cgui-color-fg-dark: var(--cg-ui-palette-neutral-80);
50
+ --cgui-color-fg-medium: var(--cg-ui-palette-neutral-60);
51
+ --cgui-color-fg-regular: var(--cg-ui-palette-neutral-50);
52
+ --cgui-color-fg-semilight: var(--cg-ui-palette-neutral-40);
53
+ --cgui-color-fg-primary: var(--cg-ui-palette-primary-80);
54
+ --cgui-color-fg-white: var(--cg-ui-palette-neutral-0);
55
+ --cgui-color-fg-error: var(--cg-ui-palette-system-error-100);
56
+ --cgui-color-fg-success: var(--cg-ui-palette-system-success-100);
57
+ --cgui-color-fg-warning: var(--cg-ui-palette-system-warning-100);
58
+ --cgui-color-stroke-default: var(--cg-ui-palette-neutral-40);
59
+ --cgui-color-stroke-minimum: var(--cg-ui-palette-neutral-10);
60
+ --cgui-color-stroke-focus: var(--cg-ui-palette-primary-60);
61
+ --cgui-color-stroke-primary: var(--cg-ui-palette-primary-80);
62
+ --cgui-color-stroke-divider: var(--cg-ui-palette-neutral-20);
63
+ --cgui-color-stroke-error: var(--cg-ui-palette-system-error-100);
64
+ --cgui-color-icon-regular: var(--cg-ui-palette-neutral-50);
65
+ --cgui-color-icon-default: var(--cg-ui-palette-neutral-40);
66
+ --cgui-color-icon-focus: var(--cg-ui-palette-primary-60);
67
+ --cgui-color-icon-white: var(--cg-ui-palette-neutral-0);
68
+ --cgui-color-state-error: var(--cg-ui-palette-system-error-100);
69
+ --cgui-color-state-error-light: var(--cg-ui-palette-system-error-10);
70
+ --cgui-color-state-warning: var(--cg-ui-palette-system-warning-100);
71
+ --cgui-color-state-warning-light: var(--cg-ui-palette-system-warning-10);
72
+ --cgui-color-state-success: var(--cg-ui-palette-system-success-100);
73
+ --cgui-color-state-success-light: var(--cg-ui-palette-system-success-10);
74
+ --cgui-color-state-info: var(--cg-ui-palette-system-info-100);
75
+ --cgui-color-state-info-light: var(--cg-ui-palette-system-info-10);
76
+ --cgui-radius-xxxs: calc(var(--cg-ui-number-xxxs) * 1px);
77
+ --cgui-radius-xxs: calc(var(--cg-ui-number-xxs) * 1px);
78
+ --cgui-radius-xs: calc(var(--cg-ui-number-xs) * 1px);
79
+ --cgui-radius-sm: calc(var(--cg-ui-number-sm) * 1px);
80
+ --cgui-radius-md: calc(var(--cg-ui-number-md) * 1px);
81
+ --cgui-radius-lg: calc(var(--cg-ui-number-lg) * 1px);
82
+ --cgui-radius-xl: calc(var(--cg-ui-number-xl) * 1px);
83
+ --cgui-text-heading: var(--cg-ui-fz-heading);
84
+ --cgui-text-heading--line-height: var(--cg-ui-lh-heading);
85
+ --cgui-text-heading-2: var(--cg-ui-fz-heading-2);
86
+ --cgui-text-heading-2--line-height: var(--cg-ui-lh-heading-2);
87
+ --cgui-text-body: var(--cg-ui-fz-body);
88
+ --cgui-text-body--line-height: var(--cg-ui-lh-body);
89
+ --cgui-text-body-2: var(--cg-ui-fz-body-2);
90
+ --cgui-text-body-2--line-height: var(--cg-ui-lh-body-2);
91
+ --cgui-text-caption: var(--cg-ui-fz-caption);
92
+ --cgui-text-caption--line-height: var(--cg-ui-lh-caption);
93
+ --cgui-text-caption-2: var(--cg-ui-fz-caption-2);
94
+ --cgui-text-caption-2--line-height: var(--cg-ui-lh-caption-2);
31
95
  }
32
96
  }
33
97
  @layer base {
@@ -721,28 +785,28 @@
721
785
  border-radius: calc(infinity * 1px);
722
786
  }
723
787
  .cgui\:rounded-lg {
724
- border-radius: calc(var(--cg-ui-number-lg) * 1px);
788
+ border-radius: var(--cgui-radius-lg);
725
789
  }
726
790
  .cgui\:rounded-md {
727
- border-radius: calc(var(--cg-ui-number-md) * 1px);
791
+ border-radius: var(--cgui-radius-md);
728
792
  }
729
793
  .cgui\:rounded-none {
730
794
  border-radius: 0;
731
795
  }
732
796
  .cgui\:rounded-sm {
733
- border-radius: calc(var(--cg-ui-number-sm) * 1px);
797
+ border-radius: var(--cgui-radius-sm);
734
798
  }
735
799
  .cgui\:rounded-xl {
736
- border-radius: calc(var(--cg-ui-number-xl) * 1px);
800
+ border-radius: var(--cgui-radius-xl);
737
801
  }
738
802
  .cgui\:rounded-xs {
739
- border-radius: calc(var(--cg-ui-number-xs) * 1px);
803
+ border-radius: var(--cgui-radius-xs);
740
804
  }
741
805
  .cgui\:rounded-xxs {
742
- border-radius: calc(var(--cg-ui-number-xxs) * 1px);
806
+ border-radius: var(--cgui-radius-xxs);
743
807
  }
744
808
  .cgui\:rounded-xxxs {
745
- border-radius: calc(var(--cg-ui-number-xxxs) * 1px);
809
+ border-radius: var(--cgui-radius-xxxs);
746
810
  }
747
811
  .cgui\:border {
748
812
  border-style: var(--tw-border-style);
@@ -773,121 +837,115 @@
773
837
  border-style: none;
774
838
  }
775
839
  .cgui\:border-stroke-default {
776
- border-color: var(--cg-ui-palette-neutral-40);
840
+ border-color: var(--cgui-color-stroke-default);
777
841
  }
778
842
  .cgui\:border-stroke-divider {
779
- border-color: var(--cg-ui-palette-neutral-20);
843
+ border-color: var(--cgui-color-stroke-divider);
780
844
  }
781
845
  .cgui\:border-stroke-error {
782
- border-color: var(--cg-ui-palette-system-error-100);
846
+ border-color: var(--cgui-color-stroke-error);
783
847
  }
784
848
  .cgui\:border-stroke-primary {
785
- border-color: var(--cg-ui-palette-primary-80);
849
+ border-color: var(--cgui-color-stroke-primary);
786
850
  }
787
851
  .cgui\:border-surface-regular {
788
- border-color: var(--cg-ui-palette-neutral-50);
852
+ border-color: var(--cgui-color-surface-regular);
789
853
  }
790
854
  .cgui\:border-transparent {
791
855
  border-color: transparent;
792
856
  }
793
857
  .cgui\:border-t-stroke-minimum\/10 {
794
- border-top-color: var(--cg-ui-palette-neutral-10);
858
+ border-top-color: var(--cgui-color-stroke-minimum);
795
859
  @supports (color: color-mix(in lab, red, red)) {
796
- border-top-color: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 10%, transparent);
860
+ border-top-color: color-mix(in oklab, var(--cgui-color-stroke-minimum) 10%, transparent);
797
861
  }
798
862
  }
799
863
  .cgui\:border-b-stroke-default {
800
- border-bottom-color: var(--cg-ui-palette-neutral-40);
864
+ border-bottom-color: var(--cgui-color-stroke-default);
801
865
  }
802
866
  .cgui\:border-b-stroke-minimum\/10 {
803
- border-bottom-color: var(--cg-ui-palette-neutral-10);
867
+ border-bottom-color: var(--cgui-color-stroke-minimum);
804
868
  @supports (color: color-mix(in lab, red, red)) {
805
- border-bottom-color: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 10%, transparent);
869
+ border-bottom-color: color-mix(in oklab, var(--cgui-color-stroke-minimum) 10%, transparent);
806
870
  }
807
871
  }
808
872
  .cgui\:bg-bg-main {
809
- background-color: var(--cg-ui-palette-neutral-20);
810
- }
811
- .cgui\:bg-black\/50 {
812
- background-color: var(--cgui-color-black);
813
- @supports (color: color-mix(in lab, red, red)) {
814
- background-color: color-mix(in oklab, var(--cgui-color-black) 50%, transparent);
815
- }
873
+ background-color: var(--cgui-color-bg-main);
816
874
  }
817
875
  .cgui\:bg-neutral-20 {
818
- background-color: var(--cg-ui-palette-neutral-20);
876
+ background-color: var(--cgui-color-neutral-20);
819
877
  }
820
878
  .cgui\:bg-neutral-40\/50 {
821
- background-color: var(--cg-ui-palette-neutral-40);
879
+ background-color: var(--cgui-color-neutral-40);
822
880
  @supports (color: color-mix(in lab, red, red)) {
823
- background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 50%, transparent);
881
+ background-color: color-mix(in oklab, var(--cgui-color-neutral-40) 50%, transparent);
824
882
  }
825
883
  }
826
884
  .cgui\:bg-primary-10 {
827
- background-color: var(--cg-ui-palette-primary-10);
885
+ background-color: var(--cgui-color-primary-10);
828
886
  }
829
887
  .cgui\:bg-primary-80 {
830
- background-color: var(--cg-ui-palette-primary-80);
888
+ background-color: var(--cgui-color-primary-80);
831
889
  }
832
890
  .cgui\:bg-state-error {
833
- background-color: var(--cg-ui-palette-system-error-100);
891
+ background-color: var(--cgui-color-state-error);
834
892
  }
835
893
  .cgui\:bg-state-error-light {
836
- background-color: var(--cg-ui-palette-system-error-10);
894
+ background-color: var(--cgui-color-state-error-light);
837
895
  }
838
896
  .cgui\:bg-state-info {
839
- background-color: var(--cg-ui-palette-system-info-100);
897
+ background-color: var(--cgui-color-state-info);
840
898
  }
841
899
  .cgui\:bg-state-info-light {
842
- background-color: var(--cg-ui-palette-system-info-10);
900
+ background-color: var(--cgui-color-state-info-light);
843
901
  }
844
902
  .cgui\:bg-state-success {
845
- background-color: var(--cg-ui-palette-system-success-100);
903
+ background-color: var(--cgui-color-state-success);
846
904
  }
847
905
  .cgui\:bg-state-success-light {
848
- background-color: var(--cg-ui-palette-system-success-10);
906
+ background-color: var(--cgui-color-state-success-light);
849
907
  }
850
908
  .cgui\:bg-state-warning {
851
- background-color: var(--cg-ui-palette-system-warning-100);
909
+ background-color: var(--cgui-color-state-warning);
852
910
  }
853
911
  .cgui\:bg-state-warning-light {
854
- background-color: var(--cg-ui-palette-system-warning-10);
912
+ background-color: var(--cgui-color-state-warning-light);
855
913
  }
856
914
  .cgui\:bg-stroke-divider {
857
- background-color: var(--cg-ui-palette-neutral-20);
915
+ background-color: var(--cgui-color-stroke-divider);
858
916
  }
859
917
  .cgui\:bg-surface-darkest {
860
- background-color: var(--cg-ui-palette-neutral-100);
918
+ background-color: var(--cgui-color-surface-darkest);
861
919
  }
862
920
  .cgui\:bg-surface-light {
863
- background-color: var(--cg-ui-palette-neutral-20);
921
+ background-color: var(--cgui-color-surface-light);
864
922
  }
865
923
  .cgui\:bg-surface-light\/50 {
866
- background-color: var(--cg-ui-palette-neutral-20);
924
+ background-color: var(--cgui-color-surface-light);
867
925
  @supports (color: color-mix(in lab, red, red)) {
868
- background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-20) 50%, transparent);
926
+ background-color: color-mix(in oklab, var(--cgui-color-surface-light) 50%, transparent);
869
927
  }
870
928
  }
871
929
  .cgui\:bg-surface-lightest {
872
- background-color: var(--cg-ui-palette-neutral-10);
930
+ background-color: var(--cgui-color-surface-lightest);
873
931
  }
874
932
  .cgui\:bg-surface-lightest\/50 {
875
- background-color: var(--cg-ui-palette-neutral-10);
933
+ background-color: var(--cgui-color-surface-lightest);
876
934
  @supports (color: color-mix(in lab, red, red)) {
877
- background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 50%, transparent);
935
+ background-color: color-mix(in oklab, var(--cgui-color-surface-lightest) 50%, transparent);
878
936
  }
879
937
  }
880
938
  .cgui\:bg-surface-primary {
881
- background-color: var(--cg-ui-palette-primary-80);
939
+ background-color: var(--cgui-color-surface-primary);
882
940
  }
883
941
  .cgui\:bg-surface-primary-light {
884
- background-color: var(--cg-ui-palette-primary-40);
942
+ background-color: var(--cgui-color-surface-primary-light);
885
943
  }
886
944
  .cgui\:bg-surface-regular {
887
- background-color: var(--cg-ui-palette-neutral-50);
945
+ background-color: var(--cgui-color-surface-regular);
888
946
  }
889
947
  .cgui\:bg-surface-white {
890
- background-color: var(--cg-ui-palette-neutral-0);
948
+ background-color: var(--cgui-color-surface-white);
891
949
  }
892
950
  .cgui\:bg-transparent {
893
951
  background-color: transparent;
@@ -900,16 +958,16 @@
900
958
  background-image: linear-gradient(var(--tw-gradient-stops));
901
959
  }
902
960
  .cgui\:from-neutral-40\/30 {
903
- --tw-gradient-from: var(--cg-ui-palette-neutral-40);
961
+ --tw-gradient-from: var(--cgui-color-neutral-40);
904
962
  @supports (color: color-mix(in lab, red, red)) {
905
- --tw-gradient-from: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 30%, transparent);
963
+ --tw-gradient-from: color-mix(in oklab, var(--cgui-color-neutral-40) 30%, transparent);
906
964
  }
907
965
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
908
966
  }
909
967
  .cgui\:to-neutral-10\/0 {
910
- --tw-gradient-to: var(--cg-ui-palette-neutral-10);
968
+ --tw-gradient-to: var(--cgui-color-neutral-10);
911
969
  @supports (color: color-mix(in lab, red, red)) {
912
- --tw-gradient-to: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 0%, transparent);
970
+ --tw-gradient-to: color-mix(in oklab, var(--cgui-color-neutral-10) 0%, transparent);
913
971
  }
914
972
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
915
973
  }
@@ -1026,28 +1084,28 @@
1026
1084
  line-height: var(--tw-leading, var(--cgui-text-base--line-height));
1027
1085
  }
1028
1086
  .cgui\:text-body {
1029
- font-size: var(--cg-ui-fz-body);
1030
- line-height: var(--tw-leading, var(--cg-ui-lh-body));
1087
+ font-size: var(--cgui-text-body);
1088
+ line-height: var(--tw-leading, var(--cgui-text-body--line-height));
1031
1089
  }
1032
1090
  .cgui\:text-body-2 {
1033
- font-size: var(--cg-ui-fz-body-2);
1034
- line-height: var(--tw-leading, var(--cg-ui-lh-body-2));
1091
+ font-size: var(--cgui-text-body-2);
1092
+ line-height: var(--tw-leading, var(--cgui-text-body-2--line-height));
1035
1093
  }
1036
1094
  .cgui\:text-caption {
1037
- font-size: var(--cg-ui-fz-caption);
1038
- line-height: var(--tw-leading, var(--cg-ui-lh-caption));
1095
+ font-size: var(--cgui-text-caption);
1096
+ line-height: var(--tw-leading, var(--cgui-text-caption--line-height));
1039
1097
  }
1040
1098
  .cgui\:text-caption-2 {
1041
- font-size: var(--cg-ui-fz-caption-2);
1042
- line-height: var(--tw-leading, var(--cg-ui-lh-caption-2));
1099
+ font-size: var(--cgui-text-caption-2);
1100
+ line-height: var(--tw-leading, var(--cgui-text-caption-2--line-height));
1043
1101
  }
1044
1102
  .cgui\:text-heading {
1045
- font-size: var(--cg-ui-fz-heading);
1046
- line-height: var(--tw-leading, var(--cg-ui-lh-heading));
1103
+ font-size: var(--cgui-text-heading);
1104
+ line-height: var(--tw-leading, var(--cgui-text-heading--line-height));
1047
1105
  }
1048
1106
  .cgui\:text-heading-2 {
1049
- font-size: var(--cg-ui-fz-heading-2);
1050
- line-height: var(--tw-leading, var(--cg-ui-lh-heading-2));
1107
+ font-size: var(--cgui-text-heading-2);
1108
+ line-height: var(--tw-leading, var(--cgui-text-heading-2--line-height));
1051
1109
  }
1052
1110
  .cgui\:text-lg {
1053
1111
  font-size: var(--cgui-text-lg);
@@ -1085,58 +1143,58 @@
1085
1143
  white-space: nowrap;
1086
1144
  }
1087
1145
  .cgui\:text-fg-dark {
1088
- color: var(--cg-ui-palette-neutral-80);
1146
+ color: var(--cgui-color-fg-dark);
1089
1147
  }
1090
1148
  .cgui\:text-fg-darkest {
1091
- color: var(--cg-ui-palette-neutral-100);
1149
+ color: var(--cgui-color-fg-darkest);
1092
1150
  }
1093
1151
  .cgui\:text-fg-error {
1094
- color: var(--cg-ui-palette-system-error-100);
1152
+ color: var(--cgui-color-fg-error);
1095
1153
  }
1096
1154
  .cgui\:text-fg-medium {
1097
- color: var(--cg-ui-palette-neutral-60);
1155
+ color: var(--cgui-color-fg-medium);
1098
1156
  }
1099
1157
  .cgui\:text-fg-primary {
1100
- color: var(--cg-ui-palette-primary-80);
1158
+ color: var(--cgui-color-fg-primary);
1101
1159
  }
1102
1160
  .cgui\:text-fg-regular {
1103
- color: var(--cg-ui-palette-neutral-50);
1161
+ color: var(--cgui-color-fg-regular);
1104
1162
  }
1105
1163
  .cgui\:text-fg-semilight {
1106
- color: var(--cg-ui-palette-neutral-40);
1164
+ color: var(--cgui-color-fg-semilight);
1107
1165
  }
1108
1166
  .cgui\:text-fg-success {
1109
- color: var(--cg-ui-palette-system-success-100);
1167
+ color: var(--cgui-color-fg-success);
1110
1168
  }
1111
1169
  .cgui\:text-fg-warning {
1112
- color: var(--cg-ui-palette-system-warning-100);
1170
+ color: var(--cgui-color-fg-warning);
1113
1171
  }
1114
1172
  .cgui\:text-fg-white {
1115
- color: var(--cg-ui-palette-neutral-0);
1173
+ color: var(--cgui-color-fg-white);
1116
1174
  }
1117
1175
  .cgui\:text-icon-default {
1118
- color: var(--cg-ui-palette-neutral-40);
1176
+ color: var(--cgui-color-icon-default);
1119
1177
  }
1120
1178
  .cgui\:text-icon-regular {
1121
- color: var(--cg-ui-palette-neutral-50);
1179
+ color: var(--cgui-color-icon-regular);
1122
1180
  }
1123
1181
  .cgui\:text-icon-white {
1124
- color: var(--cg-ui-palette-neutral-0);
1182
+ color: var(--cgui-color-icon-white);
1125
1183
  }
1126
1184
  .cgui\:text-primary-80 {
1127
- color: var(--cg-ui-palette-primary-80);
1185
+ color: var(--cgui-color-primary-80);
1128
1186
  }
1129
1187
  .cgui\:text-state-error {
1130
- color: var(--cg-ui-palette-system-error-100);
1188
+ color: var(--cgui-color-state-error);
1131
1189
  }
1132
1190
  .cgui\:text-state-info {
1133
- color: var(--cg-ui-palette-system-info-100);
1191
+ color: var(--cgui-color-state-info);
1134
1192
  }
1135
1193
  .cgui\:text-state-success {
1136
- color: var(--cg-ui-palette-system-success-100);
1194
+ color: var(--cgui-color-state-success);
1137
1195
  }
1138
1196
  .cgui\:text-state-warning {
1139
- color: var(--cg-ui-palette-system-warning-100);
1197
+ color: var(--cgui-color-state-warning);
1140
1198
  }
1141
1199
  .cgui\:underline {
1142
1200
  text-decoration-line: underline;
@@ -1171,10 +1229,6 @@
1171
1229
  --tw-shadow: var(--cg-ui-shadow-select);
1172
1230
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1173
1231
  }
1174
- .cgui\:shadow-sm {
1175
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1176
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1177
- }
1178
1232
  .cgui\:shadow-toast {
1179
1233
  --tw-shadow: var(--cg-ui-shadow-toast);
1180
1234
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1188,7 +1242,7 @@
1188
1242
  }
1189
1243
  }
1190
1244
  .cgui\:outline-stroke-focus {
1191
- outline-color: var(--cg-ui-palette-primary-60);
1245
+ outline-color: var(--cgui-color-stroke-focus);
1192
1246
  }
1193
1247
  .cgui\:transition-\[background-color\,color\,ring\,outline\,border-color\] {
1194
1248
  transition-property: background-color,color,ring,outline,border-color;
@@ -1318,7 +1372,7 @@
1318
1372
  }
1319
1373
  .cgui\:placeholder\:text-fg-regular {
1320
1374
  &::placeholder {
1321
- color: var(--cg-ui-palette-neutral-50);
1375
+ color: var(--cgui-color-fg-regular);
1322
1376
  }
1323
1377
  }
1324
1378
  .cgui\:before\:pointer-events-none {
@@ -1360,25 +1414,25 @@
1360
1414
  .cgui\:before\:bg-state-error {
1361
1415
  &::before {
1362
1416
  content: var(--tw-content);
1363
- background-color: var(--cg-ui-palette-system-error-100);
1417
+ background-color: var(--cgui-color-state-error);
1364
1418
  }
1365
1419
  }
1366
1420
  .cgui\:before\:bg-state-info {
1367
1421
  &::before {
1368
1422
  content: var(--tw-content);
1369
- background-color: var(--cg-ui-palette-system-info-100);
1423
+ background-color: var(--cgui-color-state-info);
1370
1424
  }
1371
1425
  }
1372
1426
  .cgui\:before\:bg-state-success {
1373
1427
  &::before {
1374
1428
  content: var(--tw-content);
1375
- background-color: var(--cg-ui-palette-system-success-100);
1429
+ background-color: var(--cgui-color-state-success);
1376
1430
  }
1377
1431
  }
1378
1432
  .cgui\:before\:bg-state-warning {
1379
1433
  &::before {
1380
1434
  content: var(--tw-content);
1381
- background-color: var(--cg-ui-palette-system-warning-100);
1435
+ background-color: var(--cgui-color-state-warning);
1382
1436
  }
1383
1437
  }
1384
1438
  .cgui\:before\:content-\[\"\"\] {
@@ -1390,42 +1444,42 @@
1390
1444
  .cgui\:hover\:bg-primary-60 {
1391
1445
  &:hover {
1392
1446
  @media (hover: hover) {
1393
- background-color: var(--cg-ui-palette-primary-60);
1447
+ background-color: var(--cgui-color-primary-60);
1394
1448
  }
1395
1449
  }
1396
1450
  }
1397
1451
  .cgui\:hover\:bg-surface-hover {
1398
1452
  &:hover {
1399
1453
  @media (hover: hover) {
1400
- background-color: var(--cg-ui-palette-neutral-01);
1454
+ background-color: var(--cgui-color-surface-hover);
1401
1455
  }
1402
1456
  }
1403
1457
  }
1404
1458
  .cgui\:hover\:bg-surface-primary-active {
1405
1459
  &:hover {
1406
1460
  @media (hover: hover) {
1407
- background-color: var(--cg-ui-palette-primary-60);
1461
+ background-color: var(--cgui-color-surface-primary-active);
1408
1462
  }
1409
1463
  }
1410
1464
  }
1411
1465
  .cgui\:hover\:bg-surface-primary-light {
1412
1466
  &:hover {
1413
1467
  @media (hover: hover) {
1414
- background-color: var(--cg-ui-palette-primary-40);
1468
+ background-color: var(--cgui-color-surface-primary-light);
1415
1469
  }
1416
1470
  }
1417
1471
  }
1418
1472
  .cgui\:hover\:text-fg-darkest {
1419
1473
  &:hover {
1420
1474
  @media (hover: hover) {
1421
- color: var(--cg-ui-palette-neutral-100);
1475
+ color: var(--cgui-color-fg-darkest);
1422
1476
  }
1423
1477
  }
1424
1478
  }
1425
1479
  .cgui\:hover\:text-primary-60 {
1426
1480
  &:hover {
1427
1481
  @media (hover: hover) {
1428
- color: var(--cg-ui-palette-primary-60);
1482
+ color: var(--cgui-color-primary-60);
1429
1483
  }
1430
1484
  }
1431
1485
  }
@@ -1438,17 +1492,17 @@
1438
1492
  }
1439
1493
  .cgui\:focus\:ring-stroke-default {
1440
1494
  &:focus {
1441
- --tw-ring-color: var(--cg-ui-palette-neutral-40);
1495
+ --tw-ring-color: var(--cgui-color-stroke-default);
1442
1496
  }
1443
1497
  }
1444
1498
  .cgui\:focus-visible\:border-stroke-focus {
1445
1499
  &:focus-visible {
1446
- border-color: var(--cg-ui-palette-primary-60);
1500
+ border-color: var(--cgui-color-stroke-focus);
1447
1501
  }
1448
1502
  }
1449
1503
  .cgui\:focus-visible\:ring-stroke-focus {
1450
1504
  &:focus-visible {
1451
- --tw-ring-color: var(--cg-ui-palette-primary-60);
1505
+ --tw-ring-color: var(--cgui-color-stroke-focus);
1452
1506
  }
1453
1507
  }
1454
1508
  .cgui\:active\:scale-95 {
@@ -1461,12 +1515,12 @@
1461
1515
  }
1462
1516
  .cgui\:active\:bg-primary-100 {
1463
1517
  &:active {
1464
- background-color: var(--cg-ui-palette-primary-100);
1518
+ background-color: var(--cgui-color-primary-100);
1465
1519
  }
1466
1520
  }
1467
1521
  .cgui\:active\:text-primary-100 {
1468
1522
  &:active {
1469
- color: var(--cg-ui-palette-primary-100);
1523
+ color: var(--cgui-color-primary-100);
1470
1524
  }
1471
1525
  }
1472
1526
  .cgui\:disabled\:pointer-events-none {
@@ -1496,27 +1550,27 @@
1496
1550
  }
1497
1551
  .cgui\:aria-invalid\:border-stroke-error {
1498
1552
  &[aria-invalid="true"] {
1499
- border-color: var(--cg-ui-palette-system-error-100);
1553
+ border-color: var(--cgui-color-stroke-error);
1500
1554
  }
1501
1555
  }
1502
1556
  .cgui\:aria-invalid\:ring-stroke-error {
1503
1557
  &[aria-invalid="true"] {
1504
- --tw-ring-color: var(--cg-ui-palette-system-error-100);
1558
+ --tw-ring-color: var(--cgui-color-stroke-error);
1505
1559
  }
1506
1560
  }
1507
1561
  .cgui\:data-highlighted\:bg-surface-lightest {
1508
1562
  &[data-highlighted] {
1509
- background-color: var(--cg-ui-palette-neutral-10);
1563
+ background-color: var(--cgui-color-surface-lightest);
1510
1564
  }
1511
1565
  }
1512
1566
  .cgui\:data-\[active\=\"\"\]\:bg-surface-white {
1513
1567
  &[data-active=""] {
1514
- background-color: var(--cg-ui-palette-neutral-0);
1568
+ background-color: var(--cgui-color-surface-white);
1515
1569
  }
1516
1570
  }
1517
1571
  .cgui\:data-\[active\=\"\"\]\:text-fg-primary {
1518
1572
  &[data-active=""] {
1519
- color: var(--cg-ui-palette-primary-80);
1573
+ color: var(--cgui-color-fg-primary);
1520
1574
  }
1521
1575
  }
1522
1576
  .cgui\:data-\[active\=\"\"\]\:shadow-segment-thumb {
@@ -1592,7 +1646,7 @@
1592
1646
  }
1593
1647
  .cgui\:data-\[highlighted\]\:bg-surface-lightest {
1594
1648
  &[data-highlighted] {
1595
- background-color: var(--cg-ui-palette-neutral-10);
1649
+ background-color: var(--cgui-color-surface-lightest);
1596
1650
  }
1597
1651
  }
1598
1652
  .cgui\:data-\[inset\]\:ps-8 {
@@ -1607,27 +1661,27 @@
1607
1661
  }
1608
1662
  .cgui\:data-\[placeholder\]\:text-fg-regular {
1609
1663
  &[data-placeholder] {
1610
- color: var(--cg-ui-palette-neutral-50);
1664
+ color: var(--cgui-color-fg-regular);
1611
1665
  }
1612
1666
  }
1613
1667
  .cgui\:data-\[popover-content\]\:rounded-md {
1614
1668
  &[data-popover-content] {
1615
- border-radius: calc(var(--cg-ui-number-md) * 1px);
1669
+ border-radius: var(--cgui-radius-md);
1616
1670
  }
1617
1671
  }
1618
1672
  .cgui\:data-\[popover-content\]\:bg-surface-darkest {
1619
1673
  &[data-popover-content] {
1620
- background-color: var(--cg-ui-palette-neutral-100);
1674
+ background-color: var(--cgui-color-surface-darkest);
1621
1675
  }
1622
1676
  }
1623
1677
  .cgui\:data-\[selected\=\"\"\]\:border-stroke-primary {
1624
1678
  &[data-selected=""] {
1625
- border-color: var(--cg-ui-palette-primary-80);
1679
+ border-color: var(--cgui-color-stroke-primary);
1626
1680
  }
1627
1681
  }
1628
1682
  .cgui\:data-\[selected\=\"\"\]\:text-fg-primary {
1629
1683
  &[data-selected=""] {
1630
- color: var(--cg-ui-palette-primary-80);
1684
+ color: var(--cgui-color-fg-primary);
1631
1685
  }
1632
1686
  }
1633
1687
  .cgui\:data-\[side\=bottom\]\:translate-y-1 {
@@ -1733,12 +1787,12 @@
1733
1787
  }
1734
1788
  .cgui\:data-\[state\=checked\]\:border-surface-primary {
1735
1789
  &[data-state="checked"] {
1736
- border-color: var(--cg-ui-palette-primary-80);
1790
+ border-color: var(--cgui-color-surface-primary);
1737
1791
  }
1738
1792
  }
1739
1793
  .cgui\:data-\[state\=checked\]\:bg-surface-primary {
1740
1794
  &[data-state="checked"] {
1741
- background-color: var(--cg-ui-palette-primary-80);
1795
+ background-color: var(--cgui-color-surface-primary);
1742
1796
  }
1743
1797
  }
1744
1798
  .cgui\:data-\[state\=checked\]\:shadow-switch-thumb {
@@ -1772,7 +1826,7 @@
1772
1826
  }
1773
1827
  .cgui\:data-\[state\=indeterminate\]\:border-surface-primary {
1774
1828
  &[data-state="indeterminate"] {
1775
- border-color: var(--cg-ui-palette-primary-80);
1829
+ border-color: var(--cgui-color-surface-primary);
1776
1830
  }
1777
1831
  }
1778
1832
  .cgui\:data-\[state\=open\]\:animate-in {
@@ -1830,7 +1884,7 @@
1830
1884
  &:hover {
1831
1885
  @media (hover: hover) {
1832
1886
  & [data-slot=icon] {
1833
- color: var(--cg-ui-palette-primary-60);
1887
+ color: var(--cgui-color-icon-focus);
1834
1888
  }
1835
1889
  }
1836
1890
  }
@@ -1853,20 +1907,20 @@
1853
1907
  }
1854
1908
  .cgui\:\[\&_\[data-slot\=row\]\]\:bg-neutral-0 {
1855
1909
  & [data-slot=row] {
1856
- background-color: var(--cg-ui-palette-neutral-0);
1910
+ background-color: var(--cgui-color-neutral-0);
1857
1911
  }
1858
1912
  }
1859
1913
  .cgui\:\[\&_\[data-slot\=row\]\]\:odd\:bg-neutral-0 {
1860
1914
  & [data-slot=row] {
1861
1915
  &:nth-child(odd) {
1862
- background-color: var(--cg-ui-palette-neutral-0);
1916
+ background-color: var(--cgui-color-neutral-0);
1863
1917
  }
1864
1918
  }
1865
1919
  }
1866
1920
  .cgui\:\[\&_\[data-slot\=row\]\]\:even\:bg-neutral-10 {
1867
1921
  & [data-slot=row] {
1868
1922
  &:nth-child(even) {
1869
- background-color: var(--cg-ui-palette-neutral-10);
1923
+ background-color: var(--cgui-color-neutral-10);
1870
1924
  }
1871
1925
  }
1872
1926
  }
@@ -1899,7 +1953,7 @@
1899
1953
  }
1900
1954
  .cgui\:\[\&_svg\]\:text-icon-regular {
1901
1955
  & svg {
1902
- color: var(--cg-ui-palette-neutral-50);
1956
+ color: var(--cgui-color-icon-regular);
1903
1957
  }
1904
1958
  }
1905
1959
  .cgui\:\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 {
@@ -1988,8 +2042,8 @@
1988
2042
  .cgui\:has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md {
1989
2043
  &:has(*:is(select[aria-hidden=true]:last-child)) {
1990
2044
  &>[data-slot=select-trigger]:last-of-type {
1991
- border-top-right-radius: calc(var(--cg-ui-number-md) * 1px);
1992
- border-bottom-right-radius: calc(var(--cg-ui-number-md) * 1px);
2045
+ border-top-right-radius: var(--cgui-radius-md);
2046
+ border-bottom-right-radius: var(--cgui-radius-md);
1993
2047
  }
1994
2048
  }
1995
2049
  }
@@ -2129,6 +2183,19 @@
2129
2183
  inherits: false;
2130
2184
  initial-value: 0;
2131
2185
  }
2186
+ @layer theme {
2187
+ :root, :host {
2188
+ &:where([data-theme=dark], [data-theme=dark] *) {
2189
+ --color-fg-darkest: var(--cg-ui-palette-neutral-10);
2190
+ --color-fg-dark: var(--cg-ui-palette-neutral-10);
2191
+ --color-fg-medium: var(--cg-ui-palette-neutral-40);
2192
+ --color-fg-regular: var(--cg-ui-palette-neutral-20);
2193
+ --color-fg-semilight: var(--cg-ui-palette-neutral-40);
2194
+ --color-fg-white: var(--cg-ui-palette-neutral-10);
2195
+ --color-bg-main: var(--cg-ui-palette-neutral-80);
2196
+ }
2197
+ }
2198
+ }
2132
2199
  :root {
2133
2200
  --cg-ui-primary-hue: 220;
2134
2201
  --cg-ui-primary-saturation: 80%;
@@ -2144,8 +2211,8 @@
2144
2211
  --cg-ui-palette-neutral-60: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 40%, 1);
2145
2212
  --cg-ui-palette-neutral-50: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 58%, 1);
2146
2213
  --cg-ui-palette-neutral-40: hsla(230, 20%, 78%, 1);
2147
- --cg-ui-palette-neutral-20: hsla(230, 20%, 85%, 1);
2148
- --cg-ui-palette-neutral-10: hsla(230, 20%, 95%, 1);
2214
+ --cg-ui-palette-neutral-20: hsla(230, 20%, 95%, 1);
2215
+ --cg-ui-palette-neutral-10: hsla(220, 20%, 98%, 1);
2149
2216
  --cg-ui-palette-neutral-0: hsla(0, 0%, 100%, 1);
2150
2217
  --cg-ui-palette-neutral-01: hsla(0, 0%, 100%, 0.1);
2151
2218
  --cg-ui-palette-system-error-100: hsla(2, 100%, 40%, 1);
package/dist/assets/css/theme.css CHANGED
@@ -1,4 +1,6 @@
1
- @theme inline {
1
+ @theme {
2
+ --color-*: initial;
3
+
2
4
  /* Primary colors */
3
5
  --color-primary-100: var(--cg-ui-palette-primary-100);
4
6
  --color-primary-80: var(--cg-ui-palette-primary-80);
@@ -103,6 +105,8 @@
103
105
  --blur-2xl: calc(var(--cg-ui-number-2xl) * 1px);
104
106
 
105
107
  /* Radius */
108
+ --radius-*: initial;
109
+
106
110
  --radius-null: calc(var(--cg-ui-number-null) * 1px);
107
111
  --radius-xxxs: calc(var(--cg-ui-number-xxxs) * 1px);
108
112
  --radius-xxs: calc(var(--cg-ui-number-xxs) * 1px);
@@ -117,6 +121,8 @@
117
121
  --radius-max: calc(var(--cg-ui-number-max) * 1px);
118
122
 
119
123
  /* Shadows */
124
+ --shadow-*: initial;
125
+
120
126
  --shadow-toast: var(--cg-ui-shadow-toast);
121
127
  --shadow-switch-thumb: var(--cg-ui-shadow-switch-thumb);
122
128
  --shadow-segment-thumb: var(--cg-ui-shadow-segment-item);
@@ -145,6 +151,22 @@
145
151
  --text-caption-2--line-height: var(--cg-ui-lh-caption-2);
146
152
  }
147
153
 
154
+ @layer theme {
155
+ :root,
156
+ :host {
157
+ @variant dark {
158
+ --color-fg-darkest: var(--cg-ui-palette-neutral-10);
159
+ --color-fg-dark: var(--cg-ui-palette-neutral-10);
160
+ --color-fg-medium: var(--cg-ui-palette-neutral-40);
161
+ --color-fg-regular: var(--cg-ui-palette-neutral-20);
162
+ --color-fg-semilight: var(--cg-ui-palette-neutral-40);
163
+ --color-fg-white: var(--cg-ui-palette-neutral-10);
164
+
165
+ --color-bg-main: var(--cg-ui-palette-neutral-80);
166
+ }
167
+ }
168
+ }
169
+
148
170
  :root {
149
171
  /* Primary colors */
150
172
  --cg-ui-primary-hue: 220;
@@ -167,8 +189,8 @@
167
189
 
168
190
  /* Fixed colors */
169
191
  --cg-ui-palette-neutral-40: hsla(230, 20%, 78%, 1);
170
- --cg-ui-palette-neutral-20: hsla(230, 20%, 85%, 1);
171
- --cg-ui-palette-neutral-10: hsla(230, 20%, 95%, 1);
192
+ --cg-ui-palette-neutral-20: hsla(230, 20%, 95%, 1);
193
+ --cg-ui-palette-neutral-10: hsla(220, 20%, 98%, 1);
172
194
  --cg-ui-palette-neutral-0: hsla(0, 0%, 100%, 1);
173
195
  --cg-ui-palette-neutral-01: hsla(0, 0%, 100%, 0.1);
174
196
 
package/dist/components/dialog/_ui/nested-dialog/nested-dialog.svelte CHANGED
@@ -1,5 +1,9 @@
1
1
  <script lang="ts">
2
+ import { Button } from '../../../button/index.js';
3
+ import { useDialogItemContext } from '../../dialog-host-item.svelte';
2
4
  import { dialogs } from '../../model/dialog-manager.svelte.js';
5
+
6
+ const itemCtx = useDialogItemContext();
3
7
  </script>
4
8
 
5
9
  <div class="cgui:bg-surface-white cgui:max-w-140 cgui:p-4">
@@ -15,12 +19,9 @@
15
19
  amet culpa culpa in id.
16
20
  </p>
17
21
 
18
- <button
19
- onclick={() => {
20
- dialogs.openRegistered({
21
- key: 'basic',
22
- props: {},
23
- });
24
- }}>Close</button
25
- >
22
+ <div class="cgui:flex cgui:gap-2">
23
+ <Button variant="outline" onclick={() => dialogs.closeAll()}>Close all</Button>
24
+
25
+ <Button onclick={itemCtx.close}>Close Nested Dialog</Button>
26
+ </div>
26
27
  </div>
package/dist/components/dialog/dialog-host-item.svelte CHANGED
@@ -16,11 +16,37 @@
16
16
 
17
17
  let { component, props: dialogProps, options, open, id, close, update }: DialogItemState = $props();
18
18
 
19
- const { interactOutsideBehavior = 'close', escapeKeydownBehavior = 'close', onOpenChange, ...restOptions } = options;
19
+ const {
20
+ interactOutsideBehavior = 'close',
21
+ escapeKeydownBehavior = 'close',
22
+ onOpenChange,
23
+ withOverlay = true,
24
+ contentClass,
25
+ positionerClass,
26
+ overlayClass,
27
+ contentProps: contentPropsOptions,
28
+ positionerProps: positionerPropsOptions,
29
+ overlayProps: overlayPropsOptions,
30
+ ...restOptions
31
+ } = options;
32
+
20
33
  const Component = $derived(component);
34
+
21
35
  const contentProps = $derived({
22
36
  interactOutsideBehavior,
23
37
  escapeKeydownBehavior,
38
+ class: contentClass,
39
+ ...contentPropsOptions,
40
+ });
41
+
42
+ const positionerProps = $derived({
43
+ class: positionerClass,
44
+ ...positionerPropsOptions,
45
+ });
46
+
47
+ const overlayProps = $derived({
48
+ class: overlayClass,
49
+ ...overlayPropsOptions,
24
50
  });
25
51
 
26
52
  DialogItemContext.set({
@@ -51,8 +77,10 @@
51
77
  }
52
78
  >
53
79
  <Portal>
54
- <Overlay />
55
- <Positioner>
80
+ {#if withOverlay}
81
+ <Overlay {...overlayProps} />
82
+ {/if}
83
+ <Positioner {...positionerProps}>
56
84
  <Content {...contentProps}>
57
85
  <Component {...dialogProps} />
58
86
  </Content>
package/dist/components/dialog/index.d.ts CHANGED
@@ -2,4 +2,4 @@ export * as DialogPrimitive from './exports-primitive.js';
2
2
  export * as Dialog from './exports.js';
3
3
  export { useDialogItemContext } from './dialog-host-item.svelte';
4
4
  export { dialogs } from './model/index.js';
5
- export type { DialogCloseProps, DialogContentProps, DialogOptions, DialogOverlayProps, DialogPortalProps, DialogPositionerProps, DialogRootProps, ExtractRegisterdDialogs, RegisteredDialogCollection, RegisteredDialogKeys, RegisteredDialogsOverride, RegistereDialogProps, } from './types.js';
5
+ export type { DialogCloseProps, DialogContentProps, DialogOptions, DialogOverlayProps, DialogPortalProps, DialogPositionerProps, DialogRootProps, ExtractRegisterdDialogs, RegisteredDialogCollection, RegisteredDialogKeys, RegisteredDialogsOverride, WithDialogProps, } from './types.js';
package/dist/components/dialog/model/dialog-manager.svelte.js CHANGED
@@ -29,6 +29,17 @@ export class DialogManagerState {
29
29
  'dialog:closeAll': () => this.#handleCloseAll(),
30
30
  });
31
31
  }
32
+ #updateDialog(id, fn) {
33
+ const dialogIndex = this.#dialogs.findIndex((d) => d.id === id);
34
+ if (dialogIndex === -1)
35
+ return;
36
+ const currentDialog = this.#dialogs[dialogIndex];
37
+ if (!currentDialog)
38
+ return;
39
+ const { props: newProps, options: newOptions } = fn(currentDialog.props, currentDialog.options);
40
+ currentDialog.props = { id, ...newProps };
41
+ currentDialog.options = newOptions;
42
+ }
32
43
  #handleOpenRegistered(payload) {
33
44
  const { key, props, options = {}, id } = payload;
34
45
  const registeredValue = this.opts.register.current?.[key];
@@ -55,17 +66,6 @@ export class DialogManagerState {
55
66
  const newDialogs = [...this.#dialogs.map((d) => ({ ...d, open: false })), state];
56
67
  this.dialogs = newDialogs;
57
68
  }
58
- #updateDialog(id, fn) {
59
- const dialogIndex = this.#dialogs.findIndex((d) => d.id === id);
60
- if (dialogIndex === -1)
61
- return;
62
- const currentDialog = this.#dialogs[dialogIndex];
63
- if (!currentDialog)
64
- return;
65
- const { props: newProps, options: newOptions } = fn(currentDialog.props, currentDialog.options);
66
- currentDialog.props = { id, ...newProps };
67
- currentDialog.options = newOptions;
68
- }
69
69
  #handleOpen(payload) {
70
70
  const { component, props, options = {}, id } = payload;
71
71
  const componentProps = {
@@ -89,7 +89,6 @@ export class DialogManagerState {
89
89
  const { id } = payload;
90
90
  for (let i = this.#dialogs.length - 1; i >= 0; i--) {
91
91
  const dialog = this.#dialogs[i];
92
- console.log('dialog IDX', i);
93
92
  if (!dialog)
94
93
  continue;
95
94
  if (dialog.id === id) {
@@ -102,7 +101,6 @@ export class DialogManagerState {
102
101
  }
103
102
  }
104
103
  setTimeout(() => {
105
- console.log('afterTick');
106
104
  this.dialogs = this.dialogs.filter((d) => d.id !== id);
107
105
  }, 150);
108
106
  }
package/dist/components/dialog/styles.js CHANGED
@@ -23,7 +23,7 @@ export const dialogOverlayStyles = tv({
23
23
  });
24
24
  export const dialogContentStyles = tv({
25
25
  base: [
26
- 'cgui:z-(--z-index-dialog) cgui:outline-none cgui:overflow-hidden',
26
+ 'cgui:relative cgui:z-(--z-index-dialog) cgui:outline-none cgui:overflow-hidden',
27
27
  'cgui:data-[state=open]:animate-in cgui:data-[state=open]:fade-in-0 cgui:data-[state=open]:slide-in-from-bottom-20',
28
28
  'cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=closed]:slide-out-to-bottom-20',
29
29
  ],
package/dist/components/dialog/types.d.ts CHANGED
@@ -34,8 +34,15 @@ export type DialogRegistrationOptions = {
34
34
  interactOutsideBehavior?: DialogContentProps['interactOutsideBehavior'];
35
35
  };
36
36
  export type DialogOptions = Omit<DialogRootProps, 'open' | 'onOpenChangeComplete' | 'children'> & {
37
+ withOverlay?: boolean;
37
38
  escapeKeydownBehavior?: Extract<DialogContentProps['escapeKeydownBehavior'], 'close' | 'ignore'>;
38
39
  interactOutsideBehavior?: Extract<DialogContentProps['interactOutsideBehavior'], 'close' | 'ignore'>;
40
+ contentClass?: string;
41
+ positionerClass?: string;
42
+ overlayClass?: string;
43
+ contentProps?: Partial<Omit<DialogContentProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
44
+ positionerProps?: Partial<Omit<DialogPositionerProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
45
+ overlayProps?: Partial<Omit<DialogOverlayProps, 'id' | 'class' | 'children' | 'ref' | 'child'>>;
39
46
  };
40
47
  export type DialogItemState = {
41
48
  id: string;
@@ -67,7 +74,7 @@ export type OpenDialogCommandPayload<TComponent extends DialogComponent = Dialog
67
74
  export type CloseDialogCommandPayload = {
68
75
  id: string;
69
76
  };
70
- export type RegistereDialogProps<T extends Record<string, unknown>> = {
77
+ export type WithDialogProps<T extends Record<string, unknown>> = {
71
78
  id: string;
72
79
  } & T;
73
80
  export type ExtractRegisterdDialogs<TData extends Record<string, DialogRegistrationValue>> = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@casinogate/ui",
3
- "version": "1.8.2",
3
+ "version": "1.8.4",
4
4
  "svelte": "./dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "type": "module",