@govtechsg/sgds-web-component 3.21.2-rc.5 → 3.22.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 (57) hide show
  1. package/base/select-element.d.ts +2 -0
  2. package/base/select-element.js +5 -0
  3. package/base/select-element.js.map +1 -1
  4. package/components/Breadcrumb/index.umd.min.js +1 -1
  5. package/components/Breadcrumb/index.umd.min.js.map +1 -1
  6. package/components/ComboBox/index.umd.min.js +4 -2
  7. package/components/ComboBox/index.umd.min.js.map +1 -1
  8. package/components/ComboBox/sgds-combo-box.js +2 -0
  9. package/components/ComboBox/sgds-combo-box.js.map +1 -1
  10. package/components/Datepicker/index.umd.min.js +3 -2
  11. package/components/Datepicker/index.umd.min.js.map +1 -1
  12. package/components/Footer/index.umd.min.js +1 -1
  13. package/components/Footer/index.umd.min.js.map +1 -1
  14. package/components/Input/index.umd.min.js +3 -2
  15. package/components/Input/index.umd.min.js.map +1 -1
  16. package/components/Input/sgds-input.d.ts +2 -0
  17. package/components/Input/sgds-input.js +6 -0
  18. package/components/Input/sgds-input.js.map +1 -1
  19. package/components/Link/index.umd.min.js +1 -1
  20. package/components/Link/index.umd.min.js.map +1 -1
  21. package/components/Link/link.js +1 -1
  22. package/components/QuantityToggle/index.umd.min.js +3 -2
  23. package/components/QuantityToggle/index.umd.min.js.map +1 -1
  24. package/components/Select/index.umd.min.js +2 -2
  25. package/components/Select/index.umd.min.js.map +1 -1
  26. package/components/Subnav/index.umd.min.js +1 -1
  27. package/components/Subnav/index.umd.min.js.map +1 -1
  28. package/components/index.umd.min.js +9 -6
  29. package/components/index.umd.min.js.map +1 -1
  30. package/css/fouc.css +2 -2
  31. package/css/grid.css +4 -30
  32. package/css/grid.js +1 -1
  33. package/custom-elements.json +491 -395
  34. package/index.umd.min.js +9 -6
  35. package/index.umd.min.js.map +1 -1
  36. package/package.json +1 -1
  37. package/react/base/select-element.cjs.js +5 -0
  38. package/react/base/select-element.cjs.js.map +1 -1
  39. package/react/base/select-element.js +5 -0
  40. package/react/base/select-element.js.map +1 -1
  41. package/react/components/ComboBox/sgds-combo-box.cjs.js +2 -0
  42. package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
  43. package/react/components/ComboBox/sgds-combo-box.js +2 -0
  44. package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
  45. package/react/components/Input/sgds-input.cjs.js +6 -0
  46. package/react/components/Input/sgds-input.cjs.js.map +1 -1
  47. package/react/components/Input/sgds-input.js +6 -0
  48. package/react/components/Input/sgds-input.js.map +1 -1
  49. package/react/components/Link/link.cjs.js +1 -1
  50. package/react/components/Link/link.js +1 -1
  51. package/react/css/grid.cjs.js +1 -1
  52. package/react/css/grid.js +1 -1
  53. package/react/index.cjs.js +4 -4
  54. package/react/index.d.ts +2 -2
  55. package/react/index.js +2 -2
  56. package/themes/root.css +0 -2
  57. package/types/react.d.ts +54 -165
package/css/fouc.css CHANGED
@@ -2,11 +2,11 @@ sgds-accordion-item:not(:defined),
2
2
  sgds-accordion:not(:defined),
3
3
  sgds-alert-link:not(:defined),
4
4
  sgds-alert:not(:defined),
5
- sgds-badge:not(:defined),
5
+ sgds-card:not(:defined),
6
6
  sgds-breadcrumb-item:not(:defined),
7
7
  sgds-breadcrumb:not(:defined),
8
8
  sgds-button:not(:defined),
9
- sgds-card:not(:defined),
9
+ sgds-badge: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
@@ -82,7 +82,7 @@
82
82
  }
83
83
 
84
84
  .sgds-container-sidebar {
85
- max-width: calc(100% - 96px); /* outer margin of 48px on each side */
85
+ max-width: var(--sgds-dimension-840);
86
86
  }
87
87
 
88
88
  .sgds-container {
@@ -119,7 +119,7 @@
119
119
  max-width: var(--sgds-dimension-1168);
120
120
  }
121
121
  .sgds-container-sidebar {
122
- max-width: calc(100% - 96px); /* outer margin of 48px on each side */
122
+ max-width: var(--sgds-dimension-888);
123
123
  }
124
124
 
125
125
  .sgds-col-xl-1 { grid-column: span 1; }
@@ -147,8 +147,8 @@
147
147
  .sgds-container {
148
148
  max-width: var(--sgds-dimension-1312);
149
149
  }
150
- .sgds-container-sidebar {
151
- max-width: calc(100% - 96px); /* outer margin of 48px on each side */
150
+ .sgds-container-sidebar {
151
+ max-width: var(--sgds-dimension-1024);
152
152
  }
153
153
 
154
154
  .sgds-col-2-xl-1 { grid-column: span 1; }
@@ -171,29 +171,3 @@
171
171
  .sgds-col-xl-none { display: revert; }
172
172
  .sgds-col-2-xl-none { display: none; }
173
173
  }
174
-
175
- @media (min-width: 1600px) { /* sgds-breakpoint-sbar-3-xl */
176
- .sgds-container-sidebar {
177
- max-width: min(var(--sgds-dimension-1600), calc(100% - 96px)); /* 1600px cap or 48px outer margins, whichever is smaller */
178
- }
179
-
180
- .sgds-col-3-xl-1 { grid-column: span 1; }
181
- .sgds-col-3-xl-2 { grid-column: span 2; }
182
- .sgds-col-3-xl-3 { grid-column: span 3; }
183
- .sgds-col-3-xl-4 { grid-column: span 4; }
184
- .sgds-col-3-xl-5 { grid-column: span 5; }
185
- .sgds-col-3-xl-6 { grid-column: span 6; }
186
- .sgds-col-3-xl-7 { grid-column: span 7; }
187
- .sgds-col-3-xl-8 { grid-column: span 8; }
188
- .sgds-col-3-xl-9 { grid-column: span 9; }
189
- .sgds-col-3-xl-10 { grid-column: span 10; }
190
- .sgds-col-3-xl-11 { grid-column: span 11; }
191
- .sgds-col-3-xl-12 { grid-column: span 12; }
192
- .sgds-col-3-xl-center-2 { grid-column: 6 / span 2; }
193
- .sgds-col-3-xl-center-4 { grid-column: 5 / span 4; }
194
- .sgds-col-3-xl-center-6 { grid-column: 4 / span 6; }
195
- .sgds-col-3-xl-center-8 { grid-column: 3 / span 8; }
196
- .sgds-col-3-xl-center-10 { grid-column: 2 / span 10; }
197
- .sgds-col-2-xl-none { display: revert; }
198
- .sgds-col-3-xl-none { display: none; }
199
- }
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:var(--sgds-dimension-840)}.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:var(--sgds-dimension-888)}.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:var(--sgds-dimension-1024)}.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}}`;
4
4
 
5
5
  export { css_248z as default };
6
6
  //# sourceMappingURL=grid.js.map