@govtechsg/sgds-web-component 3.21.2-rc.4 → 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.
- package/base/select-element.d.ts +2 -0
- package/base/select-element.js +5 -0
- package/base/select-element.js.map +1 -1
- package/components/Breadcrumb/index.umd.min.js +1 -1
- package/components/Breadcrumb/index.umd.min.js.map +1 -1
- package/components/ComboBox/index.umd.min.js +4 -2
- package/components/ComboBox/index.umd.min.js.map +1 -1
- package/components/ComboBox/sgds-combo-box.js +2 -0
- package/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/components/Datepicker/index.umd.min.js +3 -2
- package/components/Datepicker/index.umd.min.js.map +1 -1
- package/components/Footer/index.umd.min.js +1 -1
- package/components/Footer/index.umd.min.js.map +1 -1
- package/components/Input/index.umd.min.js +3 -2
- package/components/Input/index.umd.min.js.map +1 -1
- package/components/Input/sgds-input.d.ts +2 -0
- package/components/Input/sgds-input.js +6 -0
- package/components/Input/sgds-input.js.map +1 -1
- package/components/Link/index.umd.min.js +1 -1
- package/components/Link/index.umd.min.js.map +1 -1
- package/components/Link/link.js +1 -1
- package/components/QuantityToggle/index.umd.min.js +3 -2
- package/components/QuantityToggle/index.umd.min.js.map +1 -1
- package/components/Select/index.umd.min.js +2 -2
- package/components/Select/index.umd.min.js.map +1 -1
- package/components/Subnav/index.umd.min.js +1 -1
- package/components/Subnav/index.umd.min.js.map +1 -1
- package/components/index.umd.min.js +9 -6
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +3 -3
- package/css/grid.css +4 -30
- package/css/grid.js +1 -1
- package/custom-elements.json +1087 -991
- package/index.umd.min.js +9 -6
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/select-element.cjs.js +5 -0
- package/react/base/select-element.cjs.js.map +1 -1
- package/react/base/select-element.js +5 -0
- package/react/base/select-element.js.map +1 -1
- package/react/components/ComboBox/sgds-combo-box.cjs.js +2 -0
- package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
- package/react/components/ComboBox/sgds-combo-box.js +2 -0
- package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
- package/react/components/Input/sgds-input.cjs.js +6 -0
- package/react/components/Input/sgds-input.cjs.js.map +1 -1
- package/react/components/Input/sgds-input.js +6 -0
- package/react/components/Input/sgds-input.js.map +1 -1
- package/react/components/Link/link.cjs.js +1 -1
- package/react/components/Link/link.js +1 -1
- package/react/css/grid.cjs.js +1 -1
- package/react/css/grid.js +1 -1
- package/react/index.cjs.js +10 -10
- package/react/index.d.ts +3 -3
- package/react/index.js +3 -3
- package/themes/root.css +0 -2
- package/types/react.d.ts +65 -59
package/react/css/grid.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var lit = require('lit');
|
|
7
7
|
|
|
8
|
-
var css_248z = lit.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:
|
|
8
|
+
var css_248z = lit.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}}`;
|
|
9
9
|
|
|
10
10
|
exports["default"] = css_248z;
|
|
11
11
|
//# sourceMappingURL=grid.cjs.js.map
|
package/react/css/grid.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
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:
|
|
4
|
+
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}}`;
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
7
7
|
//# sourceMappingURL=grid.js.map
|
package/react/index.cjs.js
CHANGED
|
@@ -7,11 +7,11 @@ var index = require('./accordion-item/index.cjs.js');
|
|
|
7
7
|
var index$1 = require('./accordion/index.cjs.js');
|
|
8
8
|
var index$2 = require('./alert-link/index.cjs.js');
|
|
9
9
|
var index$3 = require('./alert/index.cjs.js');
|
|
10
|
-
var index$4 = require('./
|
|
11
|
-
var index$5 = require('./
|
|
12
|
-
var index$6 = require('./breadcrumb
|
|
13
|
-
var index$7 = require('./
|
|
14
|
-
var index$8 = require('./
|
|
10
|
+
var index$4 = require('./card/index.cjs.js');
|
|
11
|
+
var index$5 = require('./breadcrumb-item/index.cjs.js');
|
|
12
|
+
var index$6 = require('./breadcrumb/index.cjs.js');
|
|
13
|
+
var index$7 = require('./button/index.cjs.js');
|
|
14
|
+
var index$8 = require('./badge/index.cjs.js');
|
|
15
15
|
var index$9 = require('./checkbox-group/index.cjs.js');
|
|
16
16
|
var index$a = require('./checkbox/index.cjs.js');
|
|
17
17
|
var index$b = require('./close-button/index.cjs.js');
|
|
@@ -83,11 +83,11 @@ exports.SgdsAccordionItem = index["default"];
|
|
|
83
83
|
exports.SgdsAccordion = index$1["default"];
|
|
84
84
|
exports.SgdsAlertLink = index$2["default"];
|
|
85
85
|
exports.SgdsAlert = index$3["default"];
|
|
86
|
-
exports.
|
|
87
|
-
exports.
|
|
88
|
-
exports.
|
|
89
|
-
exports.
|
|
90
|
-
exports.
|
|
86
|
+
exports.SgdsCard = index$4["default"];
|
|
87
|
+
exports.SgdsBreadcrumbItem = index$5["default"];
|
|
88
|
+
exports.SgdsBreadcrumb = index$6["default"];
|
|
89
|
+
exports.SgdsButton = index$7["default"];
|
|
90
|
+
exports.SgdsBadge = index$8["default"];
|
|
91
91
|
exports.SgdsCheckboxGroup = index$9["default"];
|
|
92
92
|
exports.SgdsCheckbox = index$a["default"];
|
|
93
93
|
exports.SgdsCloseButton = index$b["default"];
|
package/react/index.d.ts
CHANGED
|
@@ -2,11 +2,11 @@ export { default as SgdsAccordionItem } from './accordion-item';
|
|
|
2
2
|
export { default as SgdsAccordion } from './accordion';
|
|
3
3
|
export { default as SgdsAlertLink } from './alert-link';
|
|
4
4
|
export { default as SgdsAlert } from './alert';
|
|
5
|
-
export { default as
|
|
6
|
-
export { default as SgdsButton } from './button';
|
|
5
|
+
export { default as SgdsCard } from './card';
|
|
7
6
|
export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
|
|
8
7
|
export { default as SgdsBreadcrumb } from './breadcrumb';
|
|
9
|
-
export { default as
|
|
8
|
+
export { default as SgdsButton } from './button';
|
|
9
|
+
export { default as SgdsBadge } from './badge';
|
|
10
10
|
export { default as SgdsCheckboxGroup } from './checkbox-group';
|
|
11
11
|
export { default as SgdsCheckbox } from './checkbox';
|
|
12
12
|
export { default as SgdsCloseButton } from './close-button';
|
package/react/index.js
CHANGED
|
@@ -3,11 +3,11 @@ export { default as SgdsAccordionItem } from './accordion-item/index.js';
|
|
|
3
3
|
export { default as SgdsAccordion } from './accordion/index.js';
|
|
4
4
|
export { default as SgdsAlertLink } from './alert-link/index.js';
|
|
5
5
|
export { default as SgdsAlert } from './alert/index.js';
|
|
6
|
-
export { default as
|
|
7
|
-
export { default as SgdsButton } from './button/index.js';
|
|
6
|
+
export { default as SgdsCard } from './card/index.js';
|
|
8
7
|
export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
|
|
9
8
|
export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
|
|
10
|
-
export { default as
|
|
9
|
+
export { default as SgdsButton } from './button/index.js';
|
|
10
|
+
export { default as SgdsBadge } from './badge/index.js';
|
|
11
11
|
export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
|
|
12
12
|
export { default as SgdsCheckbox } from './checkbox/index.js';
|
|
13
13
|
export { default as SgdsCloseButton } from './close-button/index.js';
|
package/themes/root.css
CHANGED
|
@@ -131,7 +131,6 @@
|
|
|
131
131
|
--sgds-breakpoint-sbar-lg: var(--sgds-dimension-1024);
|
|
132
132
|
--sgds-breakpoint-sbar-xl: var(--sgds-dimension-1280);
|
|
133
133
|
--sgds-breakpoint-sbar-2-xl: var(--sgds-dimension-1440);
|
|
134
|
-
--sgds-breakpoint-sbar-3-xl: var(--sgds-dimension-1600);
|
|
135
134
|
|
|
136
135
|
/* Primitive - Font Family */
|
|
137
136
|
--sgds-font-family-brand: "Inter", system-ui, sans-serif;
|
|
@@ -301,7 +300,6 @@
|
|
|
301
300
|
--sgds-dimension-1280: 1280px;
|
|
302
301
|
--sgds-dimension-1312: 1312px;
|
|
303
302
|
--sgds-dimension-1440: 1440px;
|
|
304
|
-
--sgds-dimension-1600: 1600px;
|
|
305
303
|
|
|
306
304
|
/* Semantic - Padding */
|
|
307
305
|
--sgds-padding-none: var(--sgds-spacer-0);
|
package/types/react.d.ts
CHANGED
|
@@ -149,26 +149,43 @@ export interface SgdsAlertProps extends SgdsBaseProps {
|
|
|
149
149
|
"onsgds-hide"?: SgdsEventHandler;
|
|
150
150
|
}
|
|
151
151
|
|
|
152
|
-
// ──
|
|
152
|
+
// ── Card ─────────────────────────────────────────────────────────────
|
|
153
153
|
|
|
154
|
-
export interface
|
|
155
|
-
/**
|
|
156
|
-
|
|
157
|
-
/**
|
|
158
|
-
|
|
154
|
+
export interface SgdsCardProps extends SgdsBaseProps {
|
|
155
|
+
/** Sets the image position of the card. Available options: `before`, `after` */
|
|
156
|
+
imagePosition?: CardImagePosition;
|
|
157
|
+
/** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
|
|
158
|
+
imageAdjustment?: CardImageAdjustment;
|
|
159
|
+
/** Used only for SSR to indicate the presence of the `image` slot. */
|
|
160
|
+
hasImageSlot?: boolean;
|
|
161
|
+
/** Used only for SSR to indicate the presence of the `icon` slot. */
|
|
162
|
+
hasIconSlot?: boolean;
|
|
163
|
+
/** Used only for SSR to indicate the presence of the `upper` slot. */
|
|
164
|
+
hasUpperSlot?: boolean;
|
|
165
|
+
/** Extends the link passed in either `footer` or `link`(deprecated) slot. */
|
|
166
|
+
stretchedLink?: boolean;
|
|
167
|
+
/** Disables the card */
|
|
168
|
+
disabled?: boolean;
|
|
169
|
+
/** When true, hides the default border of the card. */
|
|
170
|
+
hideBorder?: boolean;
|
|
171
|
+
/** When true, applies a tinted background color to the card. */
|
|
172
|
+
tinted?: boolean;
|
|
173
|
+
/** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
|
|
174
|
+
orientation?: CardOrientation;
|
|
175
|
+
}
|
|
159
176
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
177
|
+
// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
|
|
178
|
+
|
|
179
|
+
export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
|
|
180
|
+
/** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
|
|
181
|
+
active?: boolean;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// ── Breadcrumb ─────────────────────────────────────────────────────────────
|
|
185
|
+
|
|
186
|
+
export interface SgdsBreadcrumbProps extends SgdsBaseProps {
|
|
187
|
+
/** The aria-label of nav element within breadcrumb component. */
|
|
188
|
+
ariaLabel?: string;
|
|
172
189
|
}
|
|
173
190
|
|
|
174
191
|
// ── Button ─────────────────────────────────────────────────────────────
|
|
@@ -225,43 +242,26 @@ value of this attribute must be an id of a form in the same document or shadow r
|
|
|
225
242
|
"onsgds-focus"?: SgdsEventHandler;
|
|
226
243
|
}
|
|
227
244
|
|
|
228
|
-
// ──
|
|
229
|
-
|
|
230
|
-
export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
|
|
231
|
-
/** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
|
|
232
|
-
active?: boolean;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
// ── Breadcrumb ─────────────────────────────────────────────────────────────
|
|
236
|
-
|
|
237
|
-
export interface SgdsBreadcrumbProps extends SgdsBaseProps {
|
|
238
|
-
/** The aria-label of nav element within breadcrumb component. */
|
|
239
|
-
ariaLabel?: string;
|
|
240
|
-
}
|
|
245
|
+
// ── Badge ─────────────────────────────────────────────────────────────
|
|
241
246
|
|
|
242
|
-
|
|
247
|
+
export interface SgdsBadgeProps extends SgdsBaseProps {
|
|
248
|
+
/** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true */
|
|
249
|
+
show?: boolean;
|
|
250
|
+
/** One or more badge variant combinations.
|
|
251
|
+
Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
|
|
243
252
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
stretchedLink?: boolean;
|
|
257
|
-
/** Disables the card */
|
|
258
|
-
disabled?: boolean;
|
|
259
|
-
/** When true, hides the default border of the card. */
|
|
260
|
-
hideBorder?: boolean;
|
|
261
|
-
/** When true, applies a tinted background color to the card. */
|
|
262
|
-
tinted?: boolean;
|
|
263
|
-
/** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
|
|
264
|
-
orientation?: CardOrientation;
|
|
253
|
+
(@deprecated) The `info` variant is deprecated. Use `primary` instead. */
|
|
254
|
+
variant?: "primary" | "accent" | "success" | "danger" | "warning" | "cyan" | "purple" | "neutral" | "white" | "info";
|
|
255
|
+
/** Manually set the outlined state to false */
|
|
256
|
+
outlined?: boolean;
|
|
257
|
+
/** Manually set the dismissible state of the button to `false` */
|
|
258
|
+
dismissible?: boolean;
|
|
259
|
+
/** Manually enable full width */
|
|
260
|
+
fullWidth?: boolean;
|
|
261
|
+
"onsgds-show"?: SgdsEventHandler;
|
|
262
|
+
"onsgds-hide"?: SgdsEventHandler;
|
|
263
|
+
"onsgds-after-show"?: SgdsEventHandler;
|
|
264
|
+
"onsgds-after-hide"?: SgdsEventHandler;
|
|
265
265
|
}
|
|
266
266
|
|
|
267
267
|
// ── CheckboxGroup ─────────────────────────────────────────────────────────────
|
|
@@ -395,6 +395,8 @@ We still expose `.value` externally, but this is now the underlying ID or data
|
|
|
395
395
|
invalidFeedback?: string;
|
|
396
396
|
/** Marks the component as invalid. Replace the pseudo :invalid selector. */
|
|
397
397
|
invalid?: boolean;
|
|
398
|
+
/** Controlling of autocomplete behaviour */
|
|
399
|
+
autocomplete?: string;
|
|
398
400
|
/** The list of items to display in the dropdown.
|
|
399
401
|
`interface SgdsComboBoxItemData {
|
|
400
402
|
label: string;
|
|
@@ -777,6 +779,8 @@ export interface SgdsInputProps extends SgdsBaseProps {
|
|
|
777
779
|
autofocus?: boolean;
|
|
778
780
|
/** Makes the input readonly. */
|
|
779
781
|
readonly?: boolean;
|
|
782
|
+
/** Controlling of autocomplete behaviour */
|
|
783
|
+
autocomplete?: string;
|
|
780
784
|
/** Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
|
|
781
785
|
implied, allowing any numeric value. Only applies to number input types. */
|
|
782
786
|
step?: number | "any";
|
|
@@ -1065,6 +1069,8 @@ We still expose `.value` externally, but this is now the underlying ID or data
|
|
|
1065
1069
|
invalidFeedback?: string;
|
|
1066
1070
|
/** Marks the component as invalid. Replace the pseudo :invalid selector. */
|
|
1067
1071
|
invalid?: boolean;
|
|
1072
|
+
/** Controlling of autocomplete behaviour */
|
|
1073
|
+
autocomplete?: string;
|
|
1068
1074
|
/** The list of items to display in the dropdown.
|
|
1069
1075
|
`interface SgdsComboBoxItemData {
|
|
1070
1076
|
label: string;
|
|
@@ -1561,11 +1567,11 @@ declare module "react" {
|
|
|
1561
1567
|
"sgds-accordion": React.DetailedHTMLProps<SgdsAccordionProps, HTMLElement>;
|
|
1562
1568
|
"sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
|
|
1563
1569
|
"sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
|
|
1564
|
-
"sgds-
|
|
1565
|
-
"sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
|
|
1570
|
+
"sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
|
|
1566
1571
|
"sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
|
|
1567
1572
|
"sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
|
|
1568
|
-
"sgds-
|
|
1573
|
+
"sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
|
|
1574
|
+
"sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
|
|
1569
1575
|
"sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
|
|
1570
1576
|
"sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
|
|
1571
1577
|
"sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
|
|
@@ -1644,11 +1650,11 @@ declare global {
|
|
|
1644
1650
|
"sgds-accordion": HTMLElement;
|
|
1645
1651
|
"sgds-alert-link": HTMLElement;
|
|
1646
1652
|
"sgds-alert": HTMLElement;
|
|
1647
|
-
"sgds-
|
|
1648
|
-
"sgds-button": HTMLElement;
|
|
1653
|
+
"sgds-card": HTMLElement;
|
|
1649
1654
|
"sgds-breadcrumb-item": HTMLElement;
|
|
1650
1655
|
"sgds-breadcrumb": HTMLElement;
|
|
1651
|
-
"sgds-
|
|
1656
|
+
"sgds-button": HTMLElement;
|
|
1657
|
+
"sgds-badge": HTMLElement;
|
|
1652
1658
|
"sgds-checkbox-group": HTMLElement;
|
|
1653
1659
|
"sgds-checkbox": HTMLElement;
|
|
1654
1660
|
"sgds-close-button": HTMLElement;
|