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

package/types/react.d.ts

@@ -483,91 +483,6 @@ 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 {
@@ -708,8 +623,6 @@ 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;
 }
@@ -1032,21 +945,6 @@ 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 {
@@ -1054,7 +952,6 @@ 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 */
@@ -1640,6 +1537,53 @@ 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 {
@@ -1713,53 +1657,6 @@ 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 {
@@ -1852,10 +1749,6 @@ 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>;
@@ -1875,7 +1768,6 @@ 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>;
@@ -1906,12 +1798,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>;
@@ -1940,10 +1832,6 @@ 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;
@@ -1963,7 +1851,6 @@ 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;
@@ -1994,12 +1881,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;

package/components/DataTable/data-table.js

@@ -1,6 +0,0 @@
-import { css } from 'lit';
-
-var css_248z = css`:host{display:contents}:host([layout=fixed]) .table{table-layout:fixed}.table{border-collapse:collapse;display:table;table-layout:auto;width:100%}.data-table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;min-height:var(--sgds-dimension-56)}.footer{justify-content:space-between;padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.footer,.loading{align-items:center;display:flex}.loading{border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.loading .loading-menu{gap:var(--sgds-gap-xs);pointer-events:none}.loading .loading-menu,.no-data{align-items:center;color:var(--sgds-text-color-subtle);display:flex}.no-data{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);justify-content:center;min-height:var(--sgds-dimension-128);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.active:not(.sort-icon),tr:hover:not([data-header-row]){background-color:var(--sgds-bg-translucent-subtle);transition:background-color .15s ease}td,th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);vertical-align:middle}.data-table-cell,.data-table-head{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.data-table-head{font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-2-xs)}.sort,.sort-button{align-items:center;display:inline-flex}.sort-button{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-form-border-radius-md);color:var(--sgds-color-subtle);cursor:pointer;height:var(--sgds-dimension-24);justify-content:center;padding:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:var(--sgds-dimension-24)}.sort-button:hover{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-color-default)}.sort-button:focus,.sort-button:focus-visible{background-color:var(--sgds-bg-translucent-subtle);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sort-button:disabled{background-color:var(--sgds-bg-transparent);color:var(--sgds-color-muted);cursor:not-allowed}.sort-button.active{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-default)}.sort-icon{display:inline-flex}.data-table-cell.align-right,.data-table-head.align-right{justify-content:flex-end;text-align:right}.control-cell{width:var(--sgds-dimension-56)}:host(.checkbox-cell) .data-table-cell,:host(.checkbox-cell) .data-table-head{padding:var(--sgds-padding-sm) var(--sgds-padding-md)}:host(.expand-cell) .data-table-cell{cursor:pointer;padding:var(--sgds-padding-md)}.expandable-td{border:0;padding:0}.expandable-content{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-2-xl);padding-left:var(--sgds-padding-4-xl)}.hidden{display:none}`;
-
-export { css_248z as default };
-//# sourceMappingURL=data-table.js.map

package/components/DataTable/data-table.js.map

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

package/components/DataTable/index.d.ts

@@ -1,12 +0,0 @@
-import { SgdsDataTable } from "./sgds-data-table";
-import SgdsDataTableRow from "./sgds-data-table-row";
-import SgdsDataTableCell from "./sgds-data-table-cell";
-import SgdsDataTableHead from "./sgds-data-table-head";
-declare global {
-    interface HTMLElementTagNameMap {
-        "sgds-data-table": SgdsDataTable;
-        "sgds-data-table-row": SgdsDataTableRow;
-        "sgds-data-table-cell": SgdsDataTableCell;
-        "sgds-data-table-head": SgdsDataTableHead;
-    }
-}

package/components/DataTable/index.js

@@ -1,11 +0,0 @@
-import { SgdsDataTable } from './sgds-data-table.js';
-import { SgdsDataTableRow } from './sgds-data-table-row.js';
-import { SgdsDataTableCell } from './sgds-data-table-cell.js';
-import { SgdsDataTableHead } from './sgds-data-table-head.js';
-import { register } from '../../utils/ce-registry.js';
-
-register("sgds-data-table", SgdsDataTable);
-register("sgds-data-table-row", SgdsDataTableRow);
-register("sgds-data-table-cell", SgdsDataTableCell);
-register("sgds-data-table-head", SgdsDataTableHead);
-//# sourceMappingURL=index.js.map

package/components/DataTable/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/DataTable/index.ts"],"sourcesContent":["import { SgdsDataTable } from \"./sgds-data-table\";\nimport SgdsDataTableRow from \"./sgds-data-table-row\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-data-table\", SgdsDataTable);\nregister(\"sgds-data-table-row\", SgdsDataTableRow);\nregister(\"sgds-data-table-cell\", SgdsDataTableCell);\nregister(\"sgds-data-table-head\", SgdsDataTableHead);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"sgds-data-table\": SgdsDataTable;\n    \"sgds-data-table-row\": SgdsDataTableRow;\n    \"sgds-data-table-cell\": SgdsDataTableCell;\n    \"sgds-data-table-head\": SgdsDataTableHead;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAMA,QAAQ,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC3C,QAAQ,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC;AAClD,QAAQ,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AACpD,QAAQ,CAAC,sBAAsB,EAAE,iBAAiB,CAAC"}