@govtechsg/sgds-web-component 3.23.0-rc.7 → 3.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/components/ComboBox/index.umd.min.js +1 -1
  2. package/components/ComboBox/index.umd.min.js.map +1 -1
  3. package/components/ComboBox/sgds-combo-box.d.ts +0 -2
  4. package/components/ComboBox/sgds-combo-box.js +5 -14
  5. package/components/ComboBox/sgds-combo-box.js.map +1 -1
  6. package/components/Footer/index.umd.min.js +1 -1
  7. package/components/Footer/index.umd.min.js.map +1 -1
  8. package/components/Subnav/index.umd.min.js +1 -1
  9. package/components/Subnav/index.umd.min.js.map +1 -1
  10. package/components/index.umd.min.js +2 -2
  11. package/components/index.umd.min.js.map +1 -1
  12. package/css/fouc.css +2 -2
  13. package/css/grid.css +2 -2
  14. package/css/grid.js +1 -1
  15. package/css/reboot.css +6 -12
  16. package/css/utility.css +1 -8
  17. package/custom-elements.json +958 -965
  18. package/index.umd.min.js +2 -2
  19. package/index.umd.min.js.map +1 -1
  20. package/package.json +1 -1
  21. package/react/components/ComboBox/sgds-combo-box.cjs.js +5 -14
  22. package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
  23. package/react/components/ComboBox/sgds-combo-box.js +5 -14
  24. package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
  25. package/react/css/grid.cjs.js +1 -1
  26. package/react/css/grid.js +1 -1
  27. package/react/index.cjs.js +8 -8
  28. package/react/index.d.ts +2 -2
  29. package/react/index.js +2 -2
  30. package/themes/responsive.css +0 -15
  31. package/themes/root.css +3 -7
  32. package/types/react.d.ts +18 -18
package/css/fouc.css CHANGED
@@ -3,10 +3,10 @@ sgds-accordion:not(:defined),
3
3
  sgds-alert-link:not(:defined),
4
4
  sgds-alert:not(:defined),
5
5
  sgds-badge:not(:defined),
6
- sgds-breadcrumb-item:not(:defined),
7
- sgds-breadcrumb:not(:defined),
8
6
  sgds-button:not(:defined),
9
7
  sgds-card:not(:defined),
8
+ sgds-breadcrumb-item:not(:defined),
9
+ sgds-breadcrumb:not(:defined),
10
10
  sgds-checkbox-group:not(:defined),
11
11
  sgds-checkbox:not(:defined),
12
12
  sgds-close-button:not(:defined),
package/css/grid.css CHANGED
@@ -172,9 +172,9 @@
172
172
  .sgds-col-2-xl-none { display: none; }
173
173
  }
174
174
 
175
- @media (min-width: 1600px) { /* sgds-breakpoint-sbar-3-xl */
175
+ @media (min-width: 1680px) { /* sgds-breakpoint-sbar-3-xl */
176
176
  .sgds-container-sidebar {
177
- max-width: min(var(--sgds-dimension-1600), calc(100% - 96px)); /* 1600px cap or 48px outer margins, whichever is smaller */
177
+ max-width: var(--sgds-dimension-1296); /* 1296px cap or 48px outer margins, whichever is smaller */
178
178
  }
179
179
 
180
180
  .sgds-col-3-xl-1 { grid-column: span 1; }
package/css/grid.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css } from 'lit';
2
2
 
3
- var css_248z = css`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1600px){.sgds-container-sidebar{max-width:min(var(--sgds-dimension-1600),calc(100% - 96px))}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;
3
+ var css_248z = css`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1680px){.sgds-container-sidebar{max-width:var(--sgds-dimension-1296)}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;
4
4
 
5
5
  export { css_248z as default };
6
6
  //# sourceMappingURL=grid.js.map
package/css/reboot.css CHANGED
@@ -27,34 +27,28 @@ label {
27
27
  ol,
28
28
  ul {
29
29
  font-family: var(--sgds-font-family-brand);
30
- font-size: var(--sgds-font-size-list-md);
30
+ font-size: var(--sgds-font-size-body-md);
31
31
  font-weight: var(--sgds-font-weight-regular);
32
32
  line-height: var(--sgds-line-height-xs);
33
33
  list-style-position: outside;
34
34
  padding-left: var(--sgds-padding-2-xl);
35
- margin-top: var(--sgds-margin-none);
36
- margin-bottom: var(--sgds-paragraph-spacing-lg);
35
+ margin-top: var(--sgds-margin-xs);
37
36
  }
38
37
 
39
38
  li {
40
39
  font-family: var(--sgds-font-family-brand);
41
- font-size: var(--sgds-font-size-list-md);
40
+ font-size: var(--sgds-font-size-body-md);
42
41
  font-weight: var(--sgds-font-weight-regular);
43
42
  line-height: var(--sgds-line-height-xs);
44
43
  list-style-position: outside;
45
- margin-top: var(--sgds-list-spacing-md);
46
- }
47
- li:last-child {
48
- margin-bottom: var(--sgds-margin-none);
44
+ margin-top: var(--sgds-margin-xs);
49
45
  }
50
46
  li > ol {
51
47
  list-style-type: lower-alpha;
52
- margin-bottom: var(--sgds-list-spacing-md);
53
48
  }
54
49
  li > ul {
55
50
  list-style-type: disc;
56
- margin-bottom: var(--sgds-list-spacing-md);
57
- }
51
+ }
58
52
 
59
53
  /* HEADINGS */
60
54
  h1,
@@ -130,7 +124,7 @@ caption {
130
124
  p {
131
125
  font-size: var(--sgds-font-size-body-md);
132
126
  font-weight: var(--sgds-font-weight-regular);
133
- margin-bottom: var(--sgds-paragraph-spacing-lg);
127
+ margin-bottom: var(--sgds-paragraph-spacing-xl);
134
128
  font-family: var(--sgds-font-family-brand);
135
129
  line-height: var(--sgds-line-height-xs);
136
130
  letter-spacing: var(--sgds-letter-spacing-normal);
package/css/utility.css CHANGED
@@ -13,6 +13,7 @@
13
13
  --breakpoint-lg: 1024px;
14
14
  --breakpoint-xl: 1280px;
15
15
  --breakpoint-2-xl: 1440px;
16
+ --breakpoint-3-xl: 1680px;
16
17
 
17
18
  /* Margin and Padding */
18
19
  --spacing-none: var(--sgds-spacer-0);
@@ -285,9 +286,6 @@
285
286
  --text-body-sm: var(--sgds-font-size-body-sm);
286
287
  --text-body-md: var(--sgds-font-size-body-md);
287
288
  --text-body-lg: var(--sgds-font-size-body-lg);
288
- --text-list-sm: var(--sgds-font-size-list-sm);
289
- --text-list-md: var(--sgds-font-size-list-md);
290
- --text-list-lg: var(--sgds-font-size-list-lg);
291
289
  --text-label-xs: var(--sgds-font-size-label-xs);
292
290
  --text-label-sm: var(--sgds-font-size-label-sm);
293
291
  --text-label-md: var(--sgds-font-size-label-md);
@@ -436,11 +434,6 @@
436
434
  --margin-paragraph-lg: var(--sgds-paragraph-spacing-lg);
437
435
  --margin-paragraph-xl: var(--sgds-paragraph-spacing-xl);
438
436
 
439
- /* List Spacing */
440
- --margin-list-sm: var(--sgds-list-spacing-sm);
441
- --margin-list-md: var(--sgds-list-spacing-md);
442
- --margin-list-lg: var(--sgds-list-spacing-lg);
443
-
444
437
  /* Z-Index - Primitive */
445
438
  --z-0: var(--sgds-z-index-0);
446
439
  --z-100: var(--sgds-z-index-100);