@govtechsg/sgds-web-component 3.26.0 → 3.26.1-rc.0

package/react/index.cjs.js

@@ -17,65 +17,69 @@ var index$a = require('./checkbox/index.cjs.js');
 var index$b = require('./close-button/index.cjs.js');
 var index$c = require('./combo-box-option/index.cjs.js');
 var index$d = require('./combo-box/index.cjs.js');
-var index$e = require('./datepicker/index.cjs.js');
-var index$f = require('./description-list-group/index.cjs.js');
-var index$g = require('./description-list/index.cjs.js');
-var index$h = require('./divider/index.cjs.js');
-var index$i = require('./drawer/index.cjs.js');
-var index$j = require('./dropdown-item/index.cjs.js');
-var index$k = require('./dropdown/index.cjs.js');
-var index$l = require('./file-upload/index.cjs.js');
-var index$m = require('./footer-item/index.cjs.js');
-var index$n = require('./footer/index.cjs.js');
-var index$o = require('./icon/index.cjs.js');
-var index$p = require('./icon-button/index.cjs.js');
-var index$q = require('./icon-card/index.cjs.js');
-var index$r = require('./icon-list/index.cjs.js');
-var index$s = require('./image-card/index.cjs.js');
-var index$t = require('./input/index.cjs.js');
-var index$u = require('./link/index.cjs.js');
-var index$v = require('./mainnav-dropdown/index.cjs.js');
-var index$w = require('./mainnav-item/index.cjs.js');
-var index$x = require('./mainnav/index.cjs.js');
-var index$y = require('./masthead/index.cjs.js');
-var index$z = require('./modal/index.cjs.js');
-var index$A = require('./overflow-menu/index.cjs.js');
-var index$B = require('./pagination/index.cjs.js');
-var index$C = require('./progress-bar/index.cjs.js');
-var index$D = require('./quantity-toggle/index.cjs.js');
-var index$E = require('./radio-group/index.cjs.js');
-var index$F = require('./radio/index.cjs.js');
-var index$G = require('./select-option/index.cjs.js');
-var index$H = require('./select/index.cjs.js');
-var index$I = require('./sidebar-group/index.cjs.js');
-var index$J = require('./sidebar-item/index.cjs.js');
-var index$K = require('./sidebar-section/index.cjs.js');
-var index$L = require('./sidebar/index.cjs.js');
-var index$M = require('./sidenav-item/index.cjs.js');
-var index$N = require('./sidenav-link/index.cjs.js');
-var index$O = require('./sidenav/index.cjs.js');
-var index$P = require('./skeleton/index.cjs.js');
-var index$Q = require('./spinner/index.cjs.js');
-var index$R = require('./step/index.cjs.js');
-var index$S = require('./stepper/index.cjs.js');
-var index$T = require('./subnav-item/index.cjs.js');
-var index$U = require('./subnav/index.cjs.js');
-var index$V = require('./switch/index.cjs.js');
-var index$W = require('./system-banner-item/index.cjs.js');
-var index$X = require('./system-banner/index.cjs.js');
-var index$Y = require('./tab-group/index.cjs.js');
-var index$Z = require('./tab-panel/index.cjs.js');
-var index$_ = require('./tab/index.cjs.js');
-var index$$ = require('./table-cell/index.cjs.js');
-var index$10 = require('./table-head/index.cjs.js');
-var index$11 = require('./table-row/index.cjs.js');
-var index$12 = require('./table/index.cjs.js');
-var index$13 = require('./table-of-contents/index.cjs.js');
-var index$14 = require('./textarea/index.cjs.js');
-var index$15 = require('./thumbnail-card/index.cjs.js');
-var index$16 = require('./toast-container/index.cjs.js');
-var index$17 = require('./toast/index.cjs.js');
-var index$18 = require('./tooltip/index.cjs.js');
+var index$e = require('./data-table-cell/index.cjs.js');
+var index$f = require('./data-table-head/index.cjs.js');
+var index$g = require('./data-table-row/index.cjs.js');
+var index$h = require('./data-table/index.cjs.js');
+var index$i = require('./datepicker/index.cjs.js');
+var index$j = require('./description-list-group/index.cjs.js');
+var index$k = require('./description-list/index.cjs.js');
+var index$l = require('./divider/index.cjs.js');
+var index$m = require('./drawer/index.cjs.js');
+var index$n = require('./dropdown-item/index.cjs.js');
+var index$o = require('./dropdown/index.cjs.js');
+var index$p = require('./file-upload/index.cjs.js');
+var index$q = require('./footer-item/index.cjs.js');
+var index$r = require('./footer/index.cjs.js');
+var index$s = require('./icon/index.cjs.js');
+var index$t = require('./icon-button/index.cjs.js');
+var index$u = require('./icon-card/index.cjs.js');
+var index$v = require('./icon-list/index.cjs.js');
+var index$w = require('./image-card/index.cjs.js');
+var index$x = require('./input/index.cjs.js');
+var index$y = require('./link/index.cjs.js');
+var index$z = require('./mainnav-dropdown/index.cjs.js');
+var index$A = require('./mainnav-item/index.cjs.js');
+var index$B = require('./mainnav/index.cjs.js');
+var index$C = require('./masthead/index.cjs.js');
+var index$D = require('./modal/index.cjs.js');
+var index$E = require('./overflow-menu/index.cjs.js');
+var index$F = require('./pagination/index.cjs.js');
+var index$G = require('./progress-bar/index.cjs.js');
+var index$H = require('./quantity-toggle/index.cjs.js');
+var index$I = require('./radio-group/index.cjs.js');
+var index$J = require('./radio/index.cjs.js');
+var index$K = require('./select-option/index.cjs.js');
+var index$L = require('./select/index.cjs.js');
+var index$M = require('./sidebar-group/index.cjs.js');
+var index$N = require('./sidebar-item/index.cjs.js');
+var index$O = require('./sidebar-section/index.cjs.js');
+var index$P = require('./sidebar/index.cjs.js');
+var index$Q = require('./sidenav-item/index.cjs.js');
+var index$R = require('./sidenav-link/index.cjs.js');
+var index$S = require('./sidenav/index.cjs.js');
+var index$T = require('./skeleton/index.cjs.js');
+var index$U = require('./spinner/index.cjs.js');
+var index$V = require('./step/index.cjs.js');
+var index$W = require('./stepper/index.cjs.js');
+var index$X = require('./subnav-item/index.cjs.js');
+var index$Y = require('./subnav/index.cjs.js');
+var index$Z = require('./switch/index.cjs.js');
+var index$_ = require('./system-banner-item/index.cjs.js');
+var index$$ = require('./system-banner/index.cjs.js');
+var index$10 = require('./tab-group/index.cjs.js');
+var index$11 = require('./tab-panel/index.cjs.js');
+var index$12 = require('./tab/index.cjs.js');
+var index$13 = require('./table-cell/index.cjs.js');
+var index$14 = require('./table-head/index.cjs.js');
+var index$15 = require('./table-row/index.cjs.js');
+var index$16 = require('./table/index.cjs.js');
+var index$17 = require('./table-of-contents/index.cjs.js');
+var index$18 = require('./textarea/index.cjs.js');
+var index$19 = require('./thumbnail-card/index.cjs.js');
+var index$1a = require('./toast-container/index.cjs.js');
+var index$1b = require('./toast/index.cjs.js');
+var index$1c = require('./tooltip/index.cjs.js');
 
 
 
@@ -93,63 +97,67 @@ exports.SgdsCheckbox = index$a["default"];
 exports.SgdsCloseButton = index$b["default"];
 exports.SgdsComboBoxOption = index$c["default"];
 exports.SgdsComboBox = index$d["default"];
-exports.SgdsDatepicker = index$e["default"];
-exports.SgdsDescriptionListGroup = index$f["default"];
-exports.SgdsDescriptionList = index$g["default"];
-exports.SgdsDivider = index$h["default"];
-exports.SgdsDrawer = index$i["default"];
-exports.SgdsDropdownItem = index$j["default"];
-exports.SgdsDropdown = index$k["default"];
-exports.SgdsFileUpload = index$l["default"];
-exports.SgdsFooterItem = index$m["default"];
-exports.SgdsFooter = index$n["default"];
-exports.SgdsIcon = index$o["default"];
-exports.SgdsIconButton = index$p["default"];
-exports.SgdsIconCard = index$q["default"];
-exports.SgdsIconList = index$r["default"];
-exports.SgdsImageCard = index$s["default"];
-exports.SgdsInput = index$t["default"];
-exports.SgdsLink = index$u["default"];
-exports.SgdsMainnavDropdown = index$v["default"];
-exports.SgdsMainnavItem = index$w["default"];
-exports.SgdsMainnav = index$x["default"];
-exports.SgdsMasthead = index$y["default"];
-exports.SgdsModal = index$z["default"];
-exports.SgdsOverflowMenu = index$A["default"];
-exports.SgdsPagination = index$B["default"];
-exports.SgdsProgressBar = index$C["default"];
-exports.SgdsQuantityToggle = index$D["default"];
-exports.SgdsRadioGroup = index$E["default"];
-exports.SgdsRadio = index$F["default"];
-exports.SgdsSelectOption = index$G["default"];
-exports.SgdsSelect = index$H["default"];
-exports.SgdsSidebarGroup = index$I["default"];
-exports.SgdsSidebarItem = index$J["default"];
-exports.SgdsSidebarSection = index$K["default"];
-exports.SgdsSidebar = index$L["default"];
-exports.SgdsSidenavItem = index$M["default"];
-exports.SgdsSidenavLink = index$N["default"];
-exports.SgdsSidenav = index$O["default"];
-exports.SgdsSkeleton = index$P["default"];
-exports.SgdsSpinner = index$Q["default"];
-exports.SgdsStep = index$R["default"];
-exports.SgdsStepper = index$S["default"];
-exports.SgdsSubnavItem = index$T["default"];
-exports.SgdsSubnav = index$U["default"];
-exports.SgdsSwitch = index$V["default"];
-exports.SgdsSystemBannerItem = index$W["default"];
-exports.SgdsSystemBanner = index$X["default"];
-exports.SgdsTabGroup = index$Y["default"];
-exports.SgdsTabPanel = index$Z["default"];
-exports.SgdsTab = index$_["default"];
-exports.SgdsTableCell = index$$["default"];
-exports.SgdsTableHead = index$10["default"];
-exports.SgdsTableRow = index$11["default"];
-exports.SgdsTable = index$12["default"];
-exports.SgdsTableOfContents = index$13["default"];
-exports.SgdsTextarea = index$14["default"];
-exports.SgdsThumbnailCard = index$15["default"];
-exports.SgdsToastContainer = index$16["default"];
-exports.SgdsToast = index$17["default"];
-exports.SgdsTooltip = index$18["default"];
+exports.SgdsDataTableCell = index$e["default"];
+exports.SgdsDataTableHead = index$f["default"];
+exports.SgdsDataTableRow = index$g["default"];
+exports.SgdsDataTable = index$h["default"];
+exports.SgdsDatepicker = index$i["default"];
+exports.SgdsDescriptionListGroup = index$j["default"];
+exports.SgdsDescriptionList = index$k["default"];
+exports.SgdsDivider = index$l["default"];
+exports.SgdsDrawer = index$m["default"];
+exports.SgdsDropdownItem = index$n["default"];
+exports.SgdsDropdown = index$o["default"];
+exports.SgdsFileUpload = index$p["default"];
+exports.SgdsFooterItem = index$q["default"];
+exports.SgdsFooter = index$r["default"];
+exports.SgdsIcon = index$s["default"];
+exports.SgdsIconButton = index$t["default"];
+exports.SgdsIconCard = index$u["default"];
+exports.SgdsIconList = index$v["default"];
+exports.SgdsImageCard = index$w["default"];
+exports.SgdsInput = index$x["default"];
+exports.SgdsLink = index$y["default"];
+exports.SgdsMainnavDropdown = index$z["default"];
+exports.SgdsMainnavItem = index$A["default"];
+exports.SgdsMainnav = index$B["default"];
+exports.SgdsMasthead = index$C["default"];
+exports.SgdsModal = index$D["default"];
+exports.SgdsOverflowMenu = index$E["default"];
+exports.SgdsPagination = index$F["default"];
+exports.SgdsProgressBar = index$G["default"];
+exports.SgdsQuantityToggle = index$H["default"];
+exports.SgdsRadioGroup = index$I["default"];
+exports.SgdsRadio = index$J["default"];
+exports.SgdsSelectOption = index$K["default"];
+exports.SgdsSelect = index$L["default"];
+exports.SgdsSidebarGroup = index$M["default"];
+exports.SgdsSidebarItem = index$N["default"];
+exports.SgdsSidebarSection = index$O["default"];
+exports.SgdsSidebar = index$P["default"];
+exports.SgdsSidenavItem = index$Q["default"];
+exports.SgdsSidenavLink = index$R["default"];
+exports.SgdsSidenav = index$S["default"];
+exports.SgdsSkeleton = index$T["default"];
+exports.SgdsSpinner = index$U["default"];
+exports.SgdsStep = index$V["default"];
+exports.SgdsStepper = index$W["default"];
+exports.SgdsSubnavItem = index$X["default"];
+exports.SgdsSubnav = index$Y["default"];
+exports.SgdsSwitch = index$Z["default"];
+exports.SgdsSystemBannerItem = index$_["default"];
+exports.SgdsSystemBanner = index$$["default"];
+exports.SgdsTabGroup = index$10["default"];
+exports.SgdsTabPanel = index$11["default"];
+exports.SgdsTab = index$12["default"];
+exports.SgdsTableCell = index$13["default"];
+exports.SgdsTableHead = index$14["default"];
+exports.SgdsTableRow = index$15["default"];
+exports.SgdsTable = index$16["default"];
+exports.SgdsTableOfContents = index$17["default"];
+exports.SgdsTextarea = index$18["default"];
+exports.SgdsThumbnailCard = index$19["default"];
+exports.SgdsToastContainer = index$1a["default"];
+exports.SgdsToast = index$1b["default"];
+exports.SgdsTooltip = index$1c["default"];
 //# sourceMappingURL=index.cjs.js.map

package/react/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/react/index.d.ts

@@ -12,6 +12,10 @@ export { default as SgdsCheckbox } from './checkbox';
 export { default as SgdsCloseButton } from './close-button';
 export { default as SgdsComboBoxOption } from './combo-box-option';
 export { default as SgdsComboBox } from './combo-box';
+export { default as SgdsDataTableCell } from './data-table-cell';
+export { default as SgdsDataTableHead } from './data-table-head';
+export { default as SgdsDataTableRow } from './data-table-row';
+export { default as SgdsDataTable } from './data-table';
 export { default as SgdsDatepicker } from './datepicker';
 export { default as SgdsDescriptionListGroup } from './description-list-group';
 export { default as SgdsDescriptionList } from './description-list';

package/react/index.js

@@ -13,6 +13,10 @@ export { default as SgdsCheckbox } from './checkbox/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';
 export { default as SgdsComboBoxOption } from './combo-box-option/index.js';
 export { default as SgdsComboBox } from './combo-box/index.js';
+export { default as SgdsDataTableCell } from './data-table-cell/index.js';
+export { default as SgdsDataTableHead } from './data-table-head/index.js';
+export { default as SgdsDataTableRow } from './data-table-row/index.js';
+export { default as SgdsDataTable } from './data-table/index.js';
 export { default as SgdsDatepicker } from './datepicker/index.js';
 export { default as SgdsDescriptionListGroup } from './description-list-group/index.js';
 export { default as SgdsDescriptionList } from './description-list/index.js';

package/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/react/styles/form-text-control.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = lit.css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-xl);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-text-control.cjs.js.map

package/react/styles/form-text-control.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-xl);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/styles/form-text-control.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-md);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
+var css_248z = css`.form-control-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.m-width-160{min-width:var(--sgds-dimension-160)}.m-width-256{min-width:var(--sgds-dimension-256)}.form-label{color:var(--sgds-form-color-default);font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--input-border-radius,var(--sgds-form-border-radius-md));display:flex;gap:var(--sgds-form-gap-xl);height:var(--sgds-dimension-48);justify-content:center;overflow:hidden;padding:0 var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:block;flex-grow:1;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-label-md);line-height:var(--sgds-line-height-xs);min-width:0;outline:none;padding:0;width:100%}.form-clearable{color:var(--sgds-color-subtle);cursor:pointer}.form-control-group:not(.disabled):not(.is-invalid):not(.readonly):not(:focus-within):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-group:not(.disabled):not(.is-invalid):focus-within{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-control-container.disabled{opacity:var(--sgds-opacity-40)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted);cursor:not-allowed}.form-control-group.readonly{background-color:var(--sgds-form-surface-raised)}.form-control-group.is-invalid:not(.disabled){border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-control-group:not(.disabled).is-invalid:focus-within{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-text-control.js.map

package/types/react.d.ts

@@ -483,6 +483,91 @@ value: string;
   onSgdsAfterHide?: SgdsEventHandler;
 }
 
+// ── DataTableCell ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableCellProps extends SgdsBaseProps {
+  /** Number of columns this cell spans. */
+  colspan?: number | undefined;
+  /** Number of rows this cell spans. */
+  rowspan?: number | undefined;
+}
+
+// ── DataTableHead ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableHeadProps extends SgdsBaseProps {
+  /** Sets the column width. */
+  width?: string | undefined;
+  /** Number of columns this cell spans. */
+  colspan?: number | undefined;
+  /** Number of rows this cell spans. */
+  rowspan?: number | undefined;
+  /** Text alignment for the header content. */
+  textAlign?: "left" | "right";
+  /** Current sort direction for this column. */
+  ariasort?: "ascending" | "descending" | "none" | "other" | undefined;
+  /** When true, clicking this header cycles through ascending → descending → none sort. */
+  sorting?: boolean;
+  /** Column key emitted in the row's internal sort payload, used to identify which column to sort. */
+  sortKey?: string;
+}
+
+// ── DataTableRow ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableRowProps extends SgdsBaseProps {
+  /** Arbitrary data associated with this row. Returned in event detail on row selection. */
+  rowData?: Record<string, unknown>;
+  /** When true, the row has an expandable content area toggled by a chevron. */
+  expand?: boolean;
+  /** When true, the expandable content area is open. */
+  open?: boolean;
+  /** When true, the row is checked. */
+  checked?: boolean;
+  /** The checkbox rendered inside this row, if `showCheckbox` is true. */
+  checkbox?: SgdsCheckbox | null;
+  "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
+}
+
+// ── DataTable ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableProps extends SgdsBaseProps {
+  /** If true, renders a checkbox column for row selection. */
+  multiSelect?: boolean;
+  /** Total number of data items (for server-side pagination). */
+  dataLength?: number;
+  /** Current page (1-based). */
+  currentPage?: number;
+  /** Number of rows per page. */
+  itemsPerPage?: number;
+  /** Custom text shown on the footer's left side. */
+  footerText?: string;
+  /** If true, hides the footer (summary text and pagination controls). */
+  hideFooter?: boolean;
+  /** When true, shows a loading state and hides body rows. */
+  isLoading?: boolean;
+  /** When true, emits sort events for external handling instead of local sorting. */
+  serverSort?: boolean;
+  /** Controls the CSS `table-layout` algorithm.
+Use "auto" to let the browser size columns based on content, or "fixed" to distribute column widths evenly regardless of content. */
+  layout?: "auto" | "fixed";
+  /** Pagination mode. `client` (default) slices rows and renders pagination controls.
+`server` renders all slotted rows as-is — the caller is responsible for passing
+the correct page of data and handling `sgds-page-change` externally. */
+  mode?: "client" | "server";
+  "onsgds-row-select"?: SgdsEventHandler;
+  onSgdsRowSelect?: SgdsEventHandler;
+  "onsgds-sort"?: SgdsEventHandler;
+  onSgdsSort?: SgdsEventHandler;
+  "onsgds-page-change"?: SgdsEventHandler;
+  onSgdsPageChange?: SgdsEventHandler;
+}
+
 // ── Datepicker ─────────────────────────────────────────────────────────────
 
 export interface SgdsDatepickerProps extends SgdsBaseProps {
@@ -1749,6 +1834,10 @@ declare module "react" {
       "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
       "sgds-combo-box-option": React.DetailedHTMLProps<SgdsComboBoxOptionProps, HTMLElement>;
       "sgds-combo-box": React.DetailedHTMLProps<SgdsComboBoxProps, HTMLElement>;
+      "sgds-data-table-cell": React.DetailedHTMLProps<SgdsDataTableCellProps, HTMLElement>;
+      "sgds-data-table-head": React.DetailedHTMLProps<SgdsDataTableHeadProps, HTMLElement>;
+      "sgds-data-table-row": React.DetailedHTMLProps<SgdsDataTableRowProps, HTMLElement>;
+      "sgds-data-table": React.DetailedHTMLProps<SgdsDataTableProps, HTMLElement>;
       "sgds-datepicker": React.DetailedHTMLProps<SgdsDatepickerProps, HTMLElement>;
       "sgds-description-list-group": React.DetailedHTMLProps<SgdsDescriptionListGroupProps, HTMLElement>;
       "sgds-description-list": React.DetailedHTMLProps<SgdsDescriptionListProps, HTMLElement>;
@@ -1832,6 +1921,10 @@ declare global {
     "sgds-close-button": HTMLElement;
     "sgds-combo-box-option": HTMLElement;
     "sgds-combo-box": HTMLElement;
+    "sgds-data-table-cell": HTMLElement;
+    "sgds-data-table-head": HTMLElement;
+    "sgds-data-table-row": HTMLElement;
+    "sgds-data-table": HTMLElement;
     "sgds-datepicker": HTMLElement;
     "sgds-description-list-group": HTMLElement;
     "sgds-description-list": HTMLElement;