@govtechsg/sgds-web-component 3.27.0-rc.3 → 3.27.0

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,11 +12,6 @@
   --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

@@ -56,6 +56,16 @@ interface ISgdsComboBoxInputEventDetail {
     displayValue: string;
 }
 
+// ── DataTable ─────────────────────────────────────────────────────────────
+
+interface ISgdsDataTableRowSelectEventDetail {
+    selected: Record<string, string>[];
+}
+interface ISgdsDataTableSortEventDetail {
+    key: string;
+    direction: "ascending" | "descending" | "none";
+}
+
 // ── Datepicker ─────────────────────────────────────────────────────────────
 
 type ViewEnum = "days" | "months" | "years";
@@ -167,42 +177,6 @@ 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 {
@@ -542,8 +516,6 @@ export interface SgdsDataTableHeadProps extends SgdsBaseProps {
 // ── 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. */
@@ -574,9 +546,9 @@ export interface SgdsDataTableProps extends SgdsBaseProps {
   /** Number of rows per page. */
   itemsPerPage?: number;
   /** Custom text shown on the footer's left side. */
-  footerText?: string;
+  paginationSummary?: string;
   /** When true, shows a loading state and hides body rows. */
-  isLoading?: boolean;
+  loading?: boolean;
   /** When true, emits sort events for external handling instead of local sorting. */
   serverSort?: boolean;
   /** Variant forwarded to the internal pagination component. */
@@ -736,8 +708,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;
 }
@@ -866,23 +836,6 @@ export interface SgdsIconProps extends SgdsBaseProps {
   ariaLabel?: string;
 }
 
-// ── IconCard ─────────────────────────────────────────────────────────────
-
-export interface SgdsIconCardProps extends SgdsBaseProps {
-  /** Removes the card's internal padding when set to true. */
-  noPadding?: boolean;
-  /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
-  stretchedLink?: boolean;
-  /** Disables the card */
-  disabled?: boolean;
-  /** When true, hides the default border of the card. */
-  hideBorder?: boolean;
-  /** When true, applies a tinted background color to the card. */
-  tinted?: boolean;
-  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
-  orientation?: CardOrientation;
-}
-
 // ── IconButton ─────────────────────────────────────────────────────────────
 
 export interface SgdsIconButtonProps extends SgdsBaseProps {
@@ -914,6 +867,23 @@ export interface SgdsIconButtonProps extends SgdsBaseProps {
   onSgdsFocus?: SgdsEventHandler;
 }
 
+// ── IconCard ─────────────────────────────────────────────────────────────
+
+export interface SgdsIconCardProps extends SgdsBaseProps {
+  /** Removes the card's internal padding when set to true. */
+  noPadding?: boolean;
+  /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
+  stretchedLink?: boolean;
+  /** Disables the card */
+  disabled?: boolean;
+  /** When true, hides the default border of the card. */
+  hideBorder?: boolean;
+  /** When true, applies a tinted background color to the card. */
+  tinted?: boolean;
+  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
+  orientation?: CardOrientation;
+}
+
 // ── IconList ─────────────────────────────────────────────────────────────
 
 export interface SgdsIconListProps extends SgdsBaseProps {
@@ -1060,32 +1030,17 @@ 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;
@@ -1359,62 +1314,6 @@ value: string;
   onSgdsAfterHide?: SgdsEventHandler;
 }
 
-// ── SidenavItem ─────────────────────────────────────────────────────────────
-
-export interface SgdsSidenavItemProps extends SgdsBaseProps {
-  body?: HTMLElement;
-  /** when true, toggles the sidenav-item to open on first load and set the active stylings. */
-  active?: boolean;
-  /** Disables the SgdsSidenavItem */
-  disabled?: boolean;
-  /** Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute. */
-  ariaLabel?: string;
-  "onsgds-toggle"?: SgdsEventHandler;
-  onSgdsToggle?: SgdsEventHandler;
-  "onsgds-show"?: SgdsEventHandler;
-  onSgdsShow?: SgdsEventHandler;
-  "onsgds-after-show"?: SgdsEventHandler;
-  onSgdsAfterShow?: SgdsEventHandler;
-  "onsgds-hide"?: SgdsEventHandler;
-  onSgdsHide?: SgdsEventHandler;
-  "onsgds-after-hide"?: SgdsEventHandler;
-  onSgdsAfterHide?: SgdsEventHandler;
-}
-
-// ── SidenavLink ─────────────────────────────────────────────────────────────
-
-export interface SgdsSidenavLinkProps extends SgdsBaseProps {
-  /** when true, sets the active stylings of .nav-link */
-  active?: boolean;
-  /** Disables the SgdsMainnavItem */
-  disabled?: boolean;
-}
-
-// ── Sidenav ─────────────────────────────────────────────────────────────
-
-export interface SgdsSidenavProps extends SgdsBaseProps {
-  /** Apply position sticky to the sidenav */
-  sticky?: boolean;
-}
-
-// ── Skeleton ─────────────────────────────────────────────────────────────
-
-export interface SgdsSkeletonProps extends SgdsBaseProps {
-  /** Sets the width of skeleton. Pass value in string with length units like pixels or percentage. */
-  width?: string;
-  /** Sets the height of skeleton. Pass value in string with length units like pixels or percentage. */
-  height?: string;
-  /** Sets the border radius of skeleton. Pass value in string with length units like pixels and percentage
-When `row` is defined, the borderRadius is forwarded down to the border radius of each skeleton row */
-  borderRadius?: string;
-  /** Sets the number of rows within the given height of the skeleton.
-By default, the height of each row is auto-sized by taking the height of the skeleton divided by the number of rows and
-taking into account that there is a gap set by root css variable `--sgds-gap-xs` between each rows */
-  rows?: number;
-  /** Adds a sheening animated effect to the skeleton */
-  sheen?: boolean;
-}
-
 // ── SidebarGroup ─────────────────────────────────────────────────────────────
 
 export interface SgdsSidebarGroupProps extends SgdsBaseProps {
@@ -1496,6 +1395,62 @@ Override when your page uses a more specific term (e.g. `"Dashboard navigation"`
   onSgdsSelect?: (event: CustomEvent<ISgdsSidebarSelectEventDetail>) => void;
 }
 
+// ── SidenavItem ─────────────────────────────────────────────────────────────
+
+export interface SgdsSidenavItemProps extends SgdsBaseProps {
+  body?: HTMLElement;
+  /** when true, toggles the sidenav-item to open on first load and set the active stylings. */
+  active?: boolean;
+  /** Disables the SgdsSidenavItem */
+  disabled?: boolean;
+  /** Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute. */
+  ariaLabel?: string;
+  "onsgds-toggle"?: SgdsEventHandler;
+  onSgdsToggle?: SgdsEventHandler;
+  "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
+}
+
+// ── SidenavLink ─────────────────────────────────────────────────────────────
+
+export interface SgdsSidenavLinkProps extends SgdsBaseProps {
+  /** when true, sets the active stylings of .nav-link */
+  active?: boolean;
+  /** Disables the SgdsMainnavItem */
+  disabled?: boolean;
+}
+
+// ── Sidenav ─────────────────────────────────────────────────────────────
+
+export interface SgdsSidenavProps extends SgdsBaseProps {
+  /** Apply position sticky to the sidenav */
+  sticky?: boolean;
+}
+
+// ── Skeleton ─────────────────────────────────────────────────────────────
+
+export interface SgdsSkeletonProps extends SgdsBaseProps {
+  /** Sets the width of skeleton. Pass value in string with length units like pixels or percentage. */
+  width?: string;
+  /** Sets the height of skeleton. Pass value in string with length units like pixels or percentage. */
+  height?: string;
+  /** Sets the border radius of skeleton. Pass value in string with length units like pixels and percentage
+When `row` is defined, the borderRadius is forwarded down to the border radius of each skeleton row */
+  borderRadius?: string;
+  /** Sets the number of rows within the given height of the skeleton.
+By default, the height of each row is auto-sized by taking the height of the skeleton divided by the number of rows and
+taking into account that there is a gap set by root css variable `--sgds-gap-xs` between each rows */
+  rows?: number;
+  /** Adds a sheening animated effect to the skeleton */
+  sheen?: boolean;
+}
+
 // ── Spinner ─────────────────────────────────────────────────────────────
 
 export interface SgdsSpinnerProps extends SgdsBaseProps {
@@ -1869,8 +1824,6 @@ 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>;
@@ -1896,15 +1849,14 @@ declare module "react" {
       "sgds-footer-item": React.DetailedHTMLProps<SgdsFooterItemProps, HTMLElement>;
       "sgds-footer": React.DetailedHTMLProps<SgdsFooterProps, HTMLElement>;
       "sgds-icon": React.DetailedHTMLProps<SgdsIconProps, HTMLElement>;
-      "sgds-icon-card": React.DetailedHTMLProps<SgdsIconCardProps, HTMLElement>;
       "sgds-icon-button": React.DetailedHTMLProps<SgdsIconButtonProps, HTMLElement>;
+      "sgds-icon-card": React.DetailedHTMLProps<SgdsIconCardProps, HTMLElement>;
       "sgds-icon-list": React.DetailedHTMLProps<SgdsIconListProps, HTMLElement>;
       "sgds-image-card": React.DetailedHTMLProps<SgdsImageCardProps, HTMLElement>;
       "sgds-input": React.DetailedHTMLProps<SgdsInputProps, HTMLElement>;
       "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>;
@@ -1916,14 +1868,14 @@ declare module "react" {
       "sgds-radio": React.DetailedHTMLProps<SgdsRadioProps, HTMLElement>;
       "sgds-select-option": React.DetailedHTMLProps<SgdsSelectOptionProps, HTMLElement>;
       "sgds-select": React.DetailedHTMLProps<SgdsSelectProps, HTMLElement>;
-      "sgds-sidenav-item": React.DetailedHTMLProps<SgdsSidenavItemProps, HTMLElement>;
-      "sgds-sidenav-link": React.DetailedHTMLProps<SgdsSidenavLinkProps, HTMLElement>;
-      "sgds-sidenav": React.DetailedHTMLProps<SgdsSidenavProps, HTMLElement>;
-      "sgds-skeleton": React.DetailedHTMLProps<SgdsSkeletonProps, HTMLElement>;
       "sgds-sidebar-group": React.DetailedHTMLProps<SgdsSidebarGroupProps, HTMLElement>;
       "sgds-sidebar-item": React.DetailedHTMLProps<SgdsSidebarItemProps, HTMLElement>;
       "sgds-sidebar-section": React.DetailedHTMLProps<SgdsSidebarSectionProps, HTMLElement>;
       "sgds-sidebar": React.DetailedHTMLProps<SgdsSidebarProps, HTMLElement>;
+      "sgds-sidenav-item": React.DetailedHTMLProps<SgdsSidenavItemProps, HTMLElement>;
+      "sgds-sidenav-link": React.DetailedHTMLProps<SgdsSidenavLinkProps, HTMLElement>;
+      "sgds-sidenav": React.DetailedHTMLProps<SgdsSidenavProps, HTMLElement>;
+      "sgds-skeleton": React.DetailedHTMLProps<SgdsSkeletonProps, HTMLElement>;
       "sgds-spinner": React.DetailedHTMLProps<SgdsSpinnerProps, HTMLElement>;
       "sgds-step": React.DetailedHTMLProps<SgdsStepProps, HTMLElement>;
       "sgds-stepper": React.DetailedHTMLProps<SgdsStepperProps, HTMLElement>;
@@ -1959,8 +1911,6 @@ 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;
@@ -1986,15 +1936,14 @@ declare global {
     "sgds-footer-item": HTMLElement;
     "sgds-footer": HTMLElement;
     "sgds-icon": HTMLElement;
-    "sgds-icon-card": HTMLElement;
     "sgds-icon-button": HTMLElement;
+    "sgds-icon-card": HTMLElement;
     "sgds-icon-list": HTMLElement;
     "sgds-image-card": HTMLElement;
     "sgds-input": HTMLElement;
     "sgds-link": HTMLElement;
     "sgds-mainnav-dropdown": HTMLElement;
     "sgds-mainnav-item": HTMLElement;
-    "sgds-mainnav-profile": HTMLElement;
     "sgds-mainnav": HTMLElement;
     "sgds-masthead": HTMLElement;
     "sgds-modal": HTMLElement;
@@ -2006,14 +1955,14 @@ declare global {
     "sgds-radio": HTMLElement;
     "sgds-select-option": HTMLElement;
     "sgds-select": HTMLElement;
-    "sgds-sidenav-item": HTMLElement;
-    "sgds-sidenav-link": HTMLElement;
-    "sgds-sidenav": HTMLElement;
-    "sgds-skeleton": HTMLElement;
     "sgds-sidebar-group": HTMLElement;
     "sgds-sidebar-item": HTMLElement;
     "sgds-sidebar-section": HTMLElement;
     "sgds-sidebar": HTMLElement;
+    "sgds-sidenav-item": HTMLElement;
+    "sgds-sidenav-link": HTMLElement;
+    "sgds-sidenav": HTMLElement;
+    "sgds-skeleton": HTMLElement;
     "sgds-spinner": HTMLElement;
     "sgds-step": HTMLElement;
     "sgds-stepper": HTMLElement;

package/base/nav-element.d.ts

@@ -1,64 +0,0 @@
-import { nothing, PropertyValueMap, TemplateResult } from "lit";
-import SgdsElement from "./sgds-element";
-import SgdsIconButton from "../components/IconButton/sgds-icon-button";
-export type NavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "never";
-export type NavTone = "default" | "brand" | "gradient-1" | "gradient-2" | "gradient-3" | "gradient-4";
-/**
- * Base class for navigation components (sgds-mainnav and sgds-appnav).
- * Provides collapse/expand behavior, breakpoint handling, and animation logic.
- * Subclasses must implement `render()` and provide their own context.
- */
-export default abstract class NavElement extends SgdsElement {
-    /** @internal */
-    static dependencies: {
-        "sgds-icon-button": typeof SgdsIconButton;
-    };
-    /** Indicates if mobile menu is open or closed */
-    protected expanded: boolean;
-    /** Denotes the transition state of mobile mainnav menu opening */
-    protected expanding: boolean;
-    protected nav: HTMLElement;
-    protected navbar: HTMLElement;
-    protected header: HTMLElement;
-    protected body: HTMLElement;
-    protected navScroll: HTMLElement;
-    protected navbarEnd: HTMLElement;
-    /** The href link for brand logo */
-    brandHref: string;
-    /** @internal */
-    protected collapseId: 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: NavExpandSize;
-    protected breakpointReached: boolean;
-    /** @internal Whether sgds-*-profile is slotted in the profile slot */
-    protected _hasProfileComponent: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(changedProperties: PropertyValueMap<this>): void;
-    private _handleClickOutsideBound;
-    private _handleResizeBound;
-    private _handleClickOutOfElement;
-    protected _handleSummaryClick(): void;
-    protected _handleResize(): void;
-    /** Hook for subclasses to update context providers when breakpoint state changes */
-    protected abstract _onBreakpointReached(reached: boolean): void;
-    /** Hook for subclasses to check current breakpoint context state */
-    protected abstract _isBreakpointReached(): boolean;
-    private _handleMobileNavBound;
-    protected _handleMobileNav(): Promise<void>;
-    protected _handleDesktopNav(): void;
-    private _animateToShow;
-    /** Hook for subclasses to perform actions after the mobile menu opens (e.g., focus management) */
-    protected _onMenuShown(): void;
-    private _animateToHide;
-    /** @internal */
-    handleOpenChange(): Promise<void>;
-    /** Shows the menu. For when nav is in the collapsed form */
-    show(): Promise<void>;
-    /** Hide the menu. For when nav is in the collapsed form */
-    hide(): Promise<void>;
-    /** Helper to get the expand CSS class */
-    protected _expandClass(): string;
-    /** Helper: renders the hamburger toggler icon-button. Subclasses should call this in their render(). */
-    protected _renderToggler(tone?: NavTone): TemplateResult | typeof nothing;
-}