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

package/react/index.d.ts

@@ -35,6 +35,7 @@ export { default as SgdsInput } from './input';
 export { default as SgdsLink } from './link';
 export { default as SgdsMainnavDropdown } from './mainnav-dropdown';
 export { default as SgdsMainnavItem } from './mainnav-item';
+export { default as SgdsMainnavProfile } from './mainnav-profile';
 export { default as SgdsMainnav } from './mainnav';
 export { default as SgdsMasthead } from './masthead';
 export { default as SgdsModal } from './modal';
@@ -65,12 +66,12 @@ export { default as SgdsSystemBanner } from './system-banner';
 export { default as SgdsTabGroup } from './tab-group';
 export { default as SgdsTabPanel } from './tab-panel';
 export { default as SgdsTab } from './tab';
+export { default as SgdsTableOfContents } from './table-of-contents';
+export { default as SgdsTextarea } from './textarea';
 export { default as SgdsTableCell } from './table-cell';
 export { default as SgdsTableHead } from './table-head';
 export { default as SgdsTableRow } from './table-row';
 export { default as SgdsTable } from './table';
-export { default as SgdsTableOfContents } from './table-of-contents';
-export { default as SgdsTextarea } from './textarea';
 export { default as SgdsThumbnailCard } from './thumbnail-card';
 export { default as SgdsToastContainer } from './toast-container';
 export { default as SgdsToast } from './toast';

package/react/index.js

@@ -36,6 +36,7 @@ export { default as SgdsInput } from './input/index.js';
 export { default as SgdsLink } from './link/index.js';
 export { default as SgdsMainnavDropdown } from './mainnav-dropdown/index.js';
 export { default as SgdsMainnavItem } from './mainnav-item/index.js';
+export { default as SgdsMainnavProfile } from './mainnav-profile/index.js';
 export { default as SgdsMainnav } from './mainnav/index.js';
 export { default as SgdsMasthead } from './masthead/index.js';
 export { default as SgdsModal } from './modal/index.js';
@@ -66,12 +67,12 @@ export { default as SgdsSystemBanner } from './system-banner/index.js';
 export { default as SgdsTabGroup } from './tab-group/index.js';
 export { default as SgdsTabPanel } from './tab-panel/index.js';
 export { default as SgdsTab } from './tab/index.js';
+export { default as SgdsTableOfContents } from './table-of-contents/index.js';
+export { default as SgdsTextarea } from './textarea/index.js';
 export { default as SgdsTableCell } from './table-cell/index.js';
 export { default as SgdsTableHead } from './table-head/index.js';
 export { default as SgdsTableRow } from './table-row/index.js';
 export { default as SgdsTable } from './table/index.js';
-export { default as SgdsTableOfContents } from './table-of-contents/index.js';
-export { default as SgdsTextarea } from './textarea/index.js';
 export { default as SgdsThumbnailCard } from './thumbnail-card/index.js';
 export { default as SgdsToastContainer } from './toast-container/index.js';
 export { default as SgdsToast } from './toast/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/mainnav-profile/index.cjs.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var react = require('@lit/react');
+var sgdsMainnavProfile = require('../components/Mainnav/sgds-mainnav-profile.cjs.js');
+var ceRegistry = require('../utils/ce-registry.cjs.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+ceRegistry.register("sgds-mainnav-profile", sgdsMainnavProfile.SgdsMainnavProfile);
+var index = react.createComponent({
+    react: React__namespace,
+    tagName: "sgds-mainnav-profile",
+    elementClass: sgdsMainnavProfile.SgdsMainnavProfile,
+    events: {}
+});
+
+exports["default"] = index;
+//# sourceMappingURL=index.cjs.js.map

package/react/mainnav-profile/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/mainnav-profile/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Mainnav/sgds-mainnav-profile\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-mainnav-profile\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-mainnav-profile\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,sBAAsB,EAAEC,qCAAS,CAAC,CAAC;AAE5C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,YAAY,EAAEF,qCAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

package/react/mainnav-profile/index.d.ts

@@ -0,0 +1,4 @@
+import type { SgdsMainnavProfileProps } from '../../types/react';
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.PropsWithChildren<SgdsMainnavProfileProps> & React.RefAttributes<HTMLElement>>;
+export default _default;

package/react/mainnav-profile/index.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { SgdsMainnavProfile } from '../components/Mainnav/sgds-mainnav-profile.js';
+import { register } from '../utils/ce-registry.js';
+
+register("sgds-mainnav-profile", SgdsMainnavProfile);
+var index = createComponent({
+    react: React,
+    tagName: "sgds-mainnav-profile",
+    elementClass: SgdsMainnavProfile,
+    events: {}
+});
+
+export { index as default };
+//# sourceMappingURL=index.js.map

package/react/mainnav-profile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/react/mainnav-profile/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Mainnav/sgds-mainnav-profile\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-mainnav-profile\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-mainnav-profile\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,sBAAsB,EAAEA,kBAAS,CAAC,CAAC;AAE5C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,sBAAsB;AAC/B,IAAA,YAAY,EAAEA,kBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}

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

@@ -708,6 +708,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;
 }
@@ -1030,6 +1032,21 @@ 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 {
@@ -1037,6 +1054,7 @@ export interface SgdsMainnavProps extends SgdsBaseProps {
   hasNonCollapsibleSlot?: boolean;
   /** The href link for brand logo */
   brandHref?: string;
+  tone?: "default" | "brand" | "gradient-1" | "gradient-2" | "gradient-3" | "gradient-4";
   /** 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 */
@@ -1622,53 +1640,6 @@ export interface SgdsTabProps extends SgdsBaseProps {
   ariaLabel?: string;
 }
 
-// ── TableCell ─────────────────────────────────────────────────────────────
-
-export interface SgdsTableCellProps extends SgdsBaseProps {
-}
-
-// ── TableHead ─────────────────────────────────────────────────────────────
-
-export interface SgdsTableHeadProps extends SgdsBaseProps {
-}
-
-// ── TableRow ─────────────────────────────────────────────────────────────
-
-export interface SgdsTableRowProps extends SgdsBaseProps {
-}
-
-// ── Table ─────────────────────────────────────────────────────────────
-
-export interface SgdsTableProps extends SgdsBaseProps {
-  /** Specifies the responsive breakpoint for the table.
-Use "sm", "md", "lg", or "xl" to create responsive tables up to a particular breakpoint.
-From that breakpoint and up, the table will behave normally and not scroll horizontally.
-Use "always" to make the table always responsive.
-
-(@deprecated) Deprecated since 3.9.0 legacy from v2 */
-  responsive?: "sm" | "md" | "lg" | "xl" | "always";
-  /** Array of strings to populate row header cells. */
-  rowHeader?: string[];
-  /** Array of strings to populate column header cells.
-Only used when `headerPosition` is set to "vertical" or "both". */
-  columnHeader?: string[];
-  /** Two-dimensional array of strings or numbers to populate table data cells. */
-  tableData?: Array<(string | number)[]>;
-  /** Defines the placement of headers in the table.
-Use "horizontal" for top headers only, "vertical" for left headers only,
-or "both" for both row and column headers. */
-  headerPosition?: "horizontal" | "vertical" | "both";
-  /** Enables background styling on horizontal header rows.
-When true, applies background color to header cells for better visual distinction. */
-  headerBackground?: boolean;
-  /** Enables borders around table cells.
-When true, displays visible borders between all table cells. */
-  tableBorder?: 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";
-}
-
 // ── TableOfContents ─────────────────────────────────────────────────────────────
 
 export interface SgdsTableOfContentsProps extends SgdsBaseProps {
@@ -1742,6 +1713,53 @@ export interface SgdsTextareaProps extends SgdsBaseProps {
   onSgdsValid?: SgdsEventHandler;
 }
 
+// ── TableCell ─────────────────────────────────────────────────────────────
+
+export interface SgdsTableCellProps extends SgdsBaseProps {
+}
+
+// ── TableHead ─────────────────────────────────────────────────────────────
+
+export interface SgdsTableHeadProps extends SgdsBaseProps {
+}
+
+// ── TableRow ─────────────────────────────────────────────────────────────
+
+export interface SgdsTableRowProps extends SgdsBaseProps {
+}
+
+// ── Table ─────────────────────────────────────────────────────────────
+
+export interface SgdsTableProps extends SgdsBaseProps {
+  /** Specifies the responsive breakpoint for the table.
+Use "sm", "md", "lg", or "xl" to create responsive tables up to a particular breakpoint.
+From that breakpoint and up, the table will behave normally and not scroll horizontally.
+Use "always" to make the table always responsive.
+
+(@deprecated) Deprecated since 3.9.0 legacy from v2 */
+  responsive?: "sm" | "md" | "lg" | "xl" | "always";
+  /** Array of strings to populate row header cells. */
+  rowHeader?: string[];
+  /** Array of strings to populate column header cells.
+Only used when `headerPosition` is set to "vertical" or "both". */
+  columnHeader?: string[];
+  /** Two-dimensional array of strings or numbers to populate table data cells. */
+  tableData?: Array<(string | number)[]>;
+  /** Defines the placement of headers in the table.
+Use "horizontal" for top headers only, "vertical" for left headers only,
+or "both" for both row and column headers. */
+  headerPosition?: "horizontal" | "vertical" | "both";
+  /** Enables background styling on horizontal header rows.
+When true, applies background color to header cells for better visual distinction. */
+  headerBackground?: boolean;
+  /** Enables borders around table cells.
+When true, displays visible borders between all table cells. */
+  tableBorder?: 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";
+}
+
 // ── ThumbnailCard ─────────────────────────────────────────────────────────────
 
 export interface SgdsThumbnailCardProps extends SgdsBaseProps {
@@ -1857,6 +1875,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>;
@@ -1887,12 +1906,12 @@ declare module "react" {
       "sgds-tab-group": React.DetailedHTMLProps<SgdsTabGroupProps, HTMLElement>;
       "sgds-tab-panel": React.DetailedHTMLProps<SgdsTabPanelProps, HTMLElement>;
       "sgds-tab": React.DetailedHTMLProps<SgdsTabProps, HTMLElement>;
+      "sgds-table-of-contents": React.DetailedHTMLProps<SgdsTableOfContentsProps, HTMLElement>;
+      "sgds-textarea": React.DetailedHTMLProps<SgdsTextareaProps, HTMLElement>;
       "sgds-table-cell": React.DetailedHTMLProps<SgdsTableCellProps, HTMLElement>;
       "sgds-table-head": React.DetailedHTMLProps<SgdsTableHeadProps, HTMLElement>;
       "sgds-table-row": React.DetailedHTMLProps<SgdsTableRowProps, HTMLElement>;
       "sgds-table": React.DetailedHTMLProps<SgdsTableProps, HTMLElement>;
-      "sgds-table-of-contents": React.DetailedHTMLProps<SgdsTableOfContentsProps, HTMLElement>;
-      "sgds-textarea": React.DetailedHTMLProps<SgdsTextareaProps, HTMLElement>;
       "sgds-thumbnail-card": React.DetailedHTMLProps<SgdsThumbnailCardProps, HTMLElement>;
       "sgds-toast-container": React.DetailedHTMLProps<SgdsToastContainerProps, HTMLElement>;
       "sgds-toast": React.DetailedHTMLProps<SgdsToastProps, HTMLElement>;
@@ -1944,6 +1963,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;
@@ -1974,12 +1994,12 @@ declare global {
     "sgds-tab-group": HTMLElement;
     "sgds-tab-panel": HTMLElement;
     "sgds-tab": HTMLElement;
+    "sgds-table-of-contents": HTMLElement;
+    "sgds-textarea": HTMLElement;
     "sgds-table-cell": HTMLElement;
     "sgds-table-head": HTMLElement;
     "sgds-table-row": HTMLElement;
     "sgds-table": HTMLElement;
-    "sgds-table-of-contents": HTMLElement;
-    "sgds-textarea": HTMLElement;
     "sgds-thumbnail-card": HTMLElement;
     "sgds-toast-container": HTMLElement;
     "sgds-toast": HTMLElement;