@govtechsg/sgds-web-component 3.26.1 → 3.27.0-rc.1

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/themes/blue.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #EFF5FC;
---gt-color-200: #CEE1F6;
---gt-color-300: #A0C5EE;
---gt-color-400: #73A9E5;
---gt-color-500: #4288D6;
---gt-color-600: #356DAC;
---gt-color-700: #285483;
---gt-color-800: #1E3E62;
---gt-color-900: #152B44;
-}
+:root {
+  --gt-color-100: #EFF5FC;
+  --gt-color-200: #CEE1F6;
+  --gt-color-300: #A0C5EE;
+  --gt-color-400: #73A9E5;
+  --gt-color-500: #4288D6;
+  --gt-color-600: #356DAC;
+  --gt-color-700: #285483;
+  --gt-color-800: #1E3E62;
+  --gt-color-900: #152B44;
+}

package/themes/cyan.css

@@ -1,11 +1,11 @@
 :root {
---gt-color-100: #E0F7FE;
---gt-color-200: #A7E9FB;
---gt-color-300: #47D1F6;
---gt-color-400: #00B3E2;
---gt-color-500: #0091B8;
---gt-color-600: #007493;
---gt-color-700: #005971;
---gt-color-800: #004355;
---gt-color-900: #002E3B;
-}
+  --gt-color-100: #E0F7FE;
+  --gt-color-200: #A7E9FB;
+  --gt-color-300: #47D1F6;
+  --gt-color-400: #00B3E2;
+  --gt-color-500: #0091B8;
+  --gt-color-600: #007493;
+  --gt-color-700: #005971;
+  --gt-color-800: #004355;
+  --gt-color-900: #002E3B;
+}

package/themes/gt/blue.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #EFF5FC;
---gt-color-200: #CEE1F6;
---gt-color-300: #A0C5EE;
---gt-color-400: #73A9E5;
---gt-color-500: #4288D6;
---gt-color-600: #356DAC;
---gt-color-700: #285483;
---gt-color-800: #1E3E62;
---gt-color-900: #152B44;
-}
+:root {
+  --gt-color-100: #EFF5FC;
+  --gt-color-200: #CEE1F6;
+  --gt-color-300: #A0C5EE;
+  --gt-color-400: #73A9E5;
+  --gt-color-500: #4288D6;
+  --gt-color-600: #356DAC;
+  --gt-color-700: #285483;
+  --gt-color-800: #1E3E62;
+  --gt-color-900: #152B44;
+}

package/themes/gt/cyan.css

@@ -1,11 +1,11 @@
 :root {
---gt-color-100: #E0F7FE;
---gt-color-200: #A7E9FB;
---gt-color-300: #47D1F6;
---gt-color-400: #00B3E2;
---gt-color-500: #0091B8;
---gt-color-600: #007493;
---gt-color-700: #005971;
---gt-color-800: #004355;
---gt-color-900: #002E3B;
-}
+  --gt-color-100: #E0F7FE;
+  --gt-color-200: #A7E9FB;
+  --gt-color-300: #47D1F6;
+  --gt-color-400: #00B3E2;
+  --gt-color-500: #0091B8;
+  --gt-color-600: #007493;
+  --gt-color-700: #005971;
+  --gt-color-800: #004355;
+  --gt-color-900: #002E3B;
+}

package/themes/gt/magenta.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FBF2F9;
---gt-color-200: #F2D8ED;
---gt-color-300: #E5B2DC;
---gt-color-400: #D98BCB;
---gt-color-500: #C95EB7;
---gt-color-600: #B82EA0;
---gt-color-700: #8E247B;
---gt-color-800: #6A1B5D;
---gt-color-900: #4A1341;
-}
+:root {
+  --gt-color-100: #FBF2F9;
+  --gt-color-200: #F2D8ED;
+  --gt-color-300: #E5B2DC;
+  --gt-color-400: #D98BCB;
+  --gt-color-500: #C95EB7;
+  --gt-color-600: #B82EA0;
+  --gt-color-700: #8E247B;
+  --gt-color-800: #6A1B5D;
+  --gt-color-900: #4A1341;
+}

package/themes/gt/pink.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FDF0F6;
---gt-color-200: #F9D6E4;
---gt-color-300: #F3AECB;
---gt-color-400: #ED84AF;
---gt-color-500: #E54D8C;
---gt-color-600: #C7286A;
---gt-color-700: #991F52;
---gt-color-800: #74173D;
---gt-color-900: #51102B;
-}
+:root {
+  --gt-color-100: #FDF0F6;
+  --gt-color-200: #F9D6E4;
+  --gt-color-300: #F3AECB;
+  --gt-color-400: #ED84AF;
+  --gt-color-500: #E54D8C;
+  --gt-color-600: #C7286A;
+  --gt-color-700: #991F52;
+  --gt-color-800: #74173D;
+  --gt-color-900: #51102B;
+}

package/themes/gt/purple.css

@@ -1,11 +1,11 @@
-:root{
-    --gt-color-100: #F6F3FB;
---gt-color-200: #E5DBF2;
---gt-color-300: #CEBAE7;
---gt-color-400: #B598DC;
---gt-color-500: #9A74CF;
---gt-color-600: #8055BB;
---gt-color-700: #634190;
---gt-color-800: #49306B;
---gt-color-900: #33214A;
-}
+:root {
+  --gt-color-100: #F6F3FB;
+  --gt-color-200: #E5DBF2;
+  --gt-color-300: #CEBAE7;
+  --gt-color-400: #B598DC;
+  --gt-color-500: #9A74CF;
+  --gt-color-600: #8055BB;
+  --gt-color-700: #634190;
+  --gt-color-800: #49306B;
+  --gt-color-900: #33214A;
+}

package/themes/gt/red.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FEF0F1;
---gt-color-200: #FDD6D8;
---gt-color-300: #FBADB1;
---gt-color-400: #F88289;
---gt-color-500: #F5424B;
---gt-color-600: #CB2B33;
---gt-color-700: #9E2127;
---gt-color-800: #76191E;
---gt-color-900: #531115;
-}
+:root {
+  --gt-color-100: #FEF0F1;
+  --gt-color-200: #FDD6D8;
+  --gt-color-300: #FBADB1;
+  --gt-color-400: #F88289;
+  --gt-color-500: #F5424B;
+  --gt-color-600: #CB2B33;
+  --gt-color-700: #9E2127;
+  --gt-color-800: #76191E;
+  --gt-color-900: #531115;
+}

package/themes/magenta.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FBF2F9;
---gt-color-200: #F2D8ED;
---gt-color-300: #E5B2DC;
---gt-color-400: #D98BCB;
---gt-color-500: #C95EB7;
---gt-color-600: #B82EA0;
---gt-color-700: #8E247B;
---gt-color-800: #6A1B5D;
---gt-color-900: #4A1341;
-}
+:root {
+  --gt-color-100: #FBF2F9;
+  --gt-color-200: #F2D8ED;
+  --gt-color-300: #E5B2DC;
+  --gt-color-400: #D98BCB;
+  --gt-color-500: #C95EB7;
+  --gt-color-600: #B82EA0;
+  --gt-color-700: #8E247B;
+  --gt-color-800: #6A1B5D;
+  --gt-color-900: #4A1341;
+}

package/themes/pink.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FDF0F6;
---gt-color-200: #F9D6E4;
---gt-color-300: #F3AECB;
---gt-color-400: #ED84AF;
---gt-color-500: #E54D8C;
---gt-color-600: #C7286A;
---gt-color-700: #991F52;
---gt-color-800: #74173D;
---gt-color-900: #51102B;
-}
+:root {
+  --gt-color-100: #FDF0F6;
+  --gt-color-200: #F9D6E4;
+  --gt-color-300: #F3AECB;
+  --gt-color-400: #ED84AF;
+  --gt-color-500: #E54D8C;
+  --gt-color-600: #C7286A;
+  --gt-color-700: #991F52;
+  --gt-color-800: #74173D;
+  --gt-color-900: #51102B;
+}

package/themes/purple.css

@@ -1,11 +1,11 @@
-:root{
-    --gt-color-100: #F6F3FB;
---gt-color-200: #E5DBF2;
---gt-color-300: #CEBAE7;
---gt-color-400: #B598DC;
---gt-color-500: #9A74CF;
---gt-color-600: #8055BB;
---gt-color-700: #634190;
---gt-color-800: #49306B;
---gt-color-900: #33214A;
-}
+:root {
+  --gt-color-100: #F6F3FB;
+  --gt-color-200: #E5DBF2;
+  --gt-color-300: #CEBAE7;
+  --gt-color-400: #B598DC;
+  --gt-color-500: #9A74CF;
+  --gt-color-600: #8055BB;
+  --gt-color-700: #634190;
+  --gt-color-800: #49306B;
+  --gt-color-900: #33214A;
+}

package/themes/red.css

@@ -1,11 +1,11 @@
-:root{
---gt-color-100: #FEF0F1;
---gt-color-200: #FDD6D8;
---gt-color-300: #FBADB1;
---gt-color-400: #F88289;
---gt-color-500: #F5424B;
---gt-color-600: #CB2B33;
---gt-color-700: #9E2127;
---gt-color-800: #76191E;
---gt-color-900: #531115;
-}
+:root {
+  --gt-color-100: #FEF0F1;
+  --gt-color-200: #FDD6D8;
+  --gt-color-300: #FBADB1;
+  --gt-color-400: #F88289;
+  --gt-color-500: #F5424B;
+  --gt-color-600: #CB2B33;
+  --gt-color-700: #9E2127;
+  --gt-color-800: #76191E;
+  --gt-color-900: #531115;
+}

package/themes/root.css

@@ -12,6 +12,11 @@
   --sgds-product-primary-800: #3c2b8a;
   --sgds-product-primary-900: #2a1e61;
 
+  --sgds-gradient-1: linear-gradient(90deg, #0091B8 0%, #8055BB 100%);
+  --sgds-gradient-2: linear-gradient(90deg, #4288D6 0%, #B82EA0 100%);
+  --sgds-gradient-3: linear-gradient(90deg, #9A74CF 0%, #C7286A 100%);
+  --sgds-gradient-4: linear-gradient(90deg, #C95EB7 0%, #CB2B33 100%);
+
   /* Primitive - Purple Color */
   --sgds-purple-100: #fbf0fe;
   --sgds-purple-200: #f2d6fc;

package/types/react.d.ts

@@ -167,6 +167,42 @@ export interface SgdsAlertProps extends SgdsBaseProps {
   onSgdsHide?: SgdsEventHandler;
 }
 
+// ── AppnavProfile ─────────────────────────────────────────────────────────────
+
+export interface SgdsAppnavProfileProps extends SgdsBaseProps {
+  /** Primary text displayed next to the avatar in desktop (e.g. user name) */
+  label?: string;
+  /** Secondary text displayed below the label in desktop (e.g. agency or role) */
+  secondaryText?: string;
+  /** When true, disables the profile dropdown */
+  disabled?: boolean;
+  /** Accessible label for the profile toggle button */
+  ariaLabel?: string;
+  /** Controls dropdown close behavior. "default" auto-closes on item/outside click, "outside" closes only on outside click, "inside" prevents auto-close. */
+  close?: "default" | "outside" | "inside";
+}
+
+// ── Appnav ─────────────────────────────────────────────────────────────
+
+export interface SgdsAppnavProps extends SgdsBaseProps {
+  /** Sets the visual tone of the navigation bar */
+  tone?: "brand" | "gradient-1" | "gradient-2" | "gradient-3" | "gradient-4";
+  /** Used only for SSR to indicate the presence of the `start` slot. */
+  hasStartSlot?: boolean;
+  /** The href link for brand logo */
+  brandHref?: string;
+  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
+  expand?: "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
+  "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
+}
+
 // ── Badge ─────────────────────────────────────────────────────────────
 
 export interface SgdsBadgeProps extends SgdsBaseProps {
@@ -483,6 +519,83 @@ value: string;
   onSgdsAfterHide?: SgdsEventHandler;
 }
 
+// ── DataTableCell ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableCellProps extends SgdsBaseProps {
+}
+
+// ── DataTableHead ─────────────────────────────────────────────────────────────
+
+export interface SgdsDataTableHeadProps extends SgdsBaseProps {
+  /** Sets the column width. */
+  width?: string | undefined;
+  /** Text alignment for the header content. */
+  textAlign?: "left" | "right";
+  /** Current sort direction for this column. */
+  sortDirection?: "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;
+  /** 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;
+  /** Variant forwarded to the internal pagination component. */
+  paginationVariant?: "default" | "number" | "button" | "description";
+  /** 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 {
@@ -623,6 +736,8 @@ export interface SgdsDropdownItemProps extends SgdsBaseProps {
   active?: boolean;
   /** Disables the SgdsMainnavItem */
   disabled?: boolean;
+  /** When true, removes interactive styles (hover, cursor) for non-navigational display items */
+  readonly?: boolean;
   /** Forwards aria-label to the inner clickable element for accessibility */
   ariaLabel?: string;
 }
@@ -945,17 +1060,32 @@ export interface SgdsMainnavItemProps extends SgdsBaseProps {
   disabled?: boolean;
 }
 
+// ── MainnavProfile ─────────────────────────────────────────────────────────────
+
+export interface SgdsMainnavProfileProps extends SgdsBaseProps {
+  /** Primary text displayed next to the avatar in desktop (e.g. user name) */
+  label?: string;
+  /** Secondary text displayed below the label in desktop (e.g. agency or role) */
+  secondaryText?: string;
+  /** When true, disables the profile dropdown */
+  disabled?: boolean;
+  /** Accessible label for the profile toggle button */
+  ariaLabel?: string;
+  /** Controls dropdown close behavior. "default" auto-closes on item/outside click, "outside" closes only on outside click, "inside" prevents auto-close. */
+  close?: "default" | "outside" | "inside";
+}
+
 // ── Mainnav ─────────────────────────────────────────────────────────────
 
 export interface SgdsMainnavProps extends SgdsBaseProps {
   /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
   hasNonCollapsibleSlot?: boolean;
+  /** When true, removes max-width constraint to allow content to stretch full screen width */
+  fluid?: boolean;
   /** The href link for brand logo */
   brandHref?: string;
   /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */
   expand?: "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
-  /** When true, removes max-width constraint to allow content to stretch full screen width */
-  fluid?: boolean;
   "onsgds-show"?: SgdsEventHandler;
   onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
@@ -1739,6 +1869,8 @@ declare module "react" {
       "sgds-accordion": React.DetailedHTMLProps<SgdsAccordionProps, HTMLElement>;
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
+      "sgds-appnav-profile": React.DetailedHTMLProps<SgdsAppnavProfileProps, HTMLElement>;
+      "sgds-appnav": React.DetailedHTMLProps<SgdsAppnavProps, HTMLElement>;
       "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
       "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
       "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
@@ -1749,6 +1881,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>;
@@ -1768,6 +1904,7 @@ declare module "react" {
       "sgds-link": React.DetailedHTMLProps<SgdsLinkProps, HTMLElement>;
       "sgds-mainnav-dropdown": React.DetailedHTMLProps<SgdsMainnavDropdownProps, HTMLElement>;
       "sgds-mainnav-item": React.DetailedHTMLProps<SgdsMainnavItemProps, HTMLElement>;
+      "sgds-mainnav-profile": React.DetailedHTMLProps<SgdsMainnavProfileProps, HTMLElement>;
       "sgds-mainnav": React.DetailedHTMLProps<SgdsMainnavProps, HTMLElement>;
       "sgds-masthead": React.DetailedHTMLProps<SgdsMastheadProps, HTMLElement>;
       "sgds-modal": React.DetailedHTMLProps<SgdsModalProps, HTMLElement>;
@@ -1822,6 +1959,8 @@ declare global {
     "sgds-accordion": HTMLElement;
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
+    "sgds-appnav-profile": HTMLElement;
+    "sgds-appnav": HTMLElement;
     "sgds-badge": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
@@ -1832,6 +1971,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;
@@ -1851,6 +1994,7 @@ declare global {
     "sgds-link": HTMLElement;
     "sgds-mainnav-dropdown": HTMLElement;
     "sgds-mainnav-item": HTMLElement;
+    "sgds-mainnav-profile": HTMLElement;
     "sgds-mainnav": HTMLElement;
     "sgds-masthead": HTMLElement;
     "sgds-modal": HTMLElement;