@govtechsg/sgds-web-component 3.29.1-rc.1 → 3.29.1-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.29.1-rc.1",
+  "version": "3.29.1-rc.3",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/components/Badge/badge.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Badge/badge.css
-var css_248z = require("lit").css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=accent]) .badge{background-color:var(--sgds-accent-surface-default)}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=cyan]) .badge{background-color:var(--sgds-cyan-surface-default)}:host([variant=purple]) .badge{background-color:var(--sgds-purple-surface-default)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=white]) .badge{background-color:var(--sgds-surface-fixed-light);color:var(--sgds-color-fixed-dark)}:host([variant=accent][outlined]) .badge{background-color:var(--sgds-accent-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);color:var(--sgds-accent-color-fixed-dark)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);color:var(--sgds-success-color-fixed-dark)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);color:var(--sgds-danger-color-fixed-dark)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);color:var(--sgds-warning-color-fixed-dark)}:host([variant=cyan][outlined]) .badge{background-color:var(--sgds-cyan-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);color:var(--sgds-cyan-color-fixed-dark)}:host([variant=purple][outlined]) .badge{background-color:var(--sgds-purple-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);color:var(--sgds-purple-color-fixed-dark)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);color:var(--sgds-color-fixed-dark)}:host([variant=white][outlined]) .badge{background-color:var(--sgds-surface-fixed-light);border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);color:var(--sgds-color-fixed-dark)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-24,24px);justify-content:center;line-height:var(--sgds-line-height-3-xs);max-width:var(--sgds-dimension-192,192px);min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);color:var(--sgds-primary-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{overflow:hidden;padding:var(--sgds-padding-none) var(--sgds-padding-3-xs);text-overflow:ellipsis;white-space:nowrap}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:inherit!important}`;
+var css_248z = require("lit").css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=accent]) .badge{background-color:var(--sgds-accent-surface-default)}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=cyan]) .badge{background-color:var(--sgds-cyan-surface-default)}:host([variant=purple]) .badge{background-color:var(--sgds-purple-surface-default)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=white]) .badge{background-color:var(--sgds-surface-fixed-light);color:var(--sgds-color-fixed-dark)}:host([variant=accent][outlined]) .badge{background-color:var(--sgds-accent-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);color:var(--sgds-accent-color-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);color:var(--sgds-success-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);color:var(--sgds-danger-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);color:var(--sgds-warning-color-default)}:host([variant=cyan][outlined]) .badge{background-color:var(--sgds-cyan-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);color:var(--sgds-cyan-color-default)}:host([variant=purple][outlined]) .badge{background-color:var(--sgds-purple-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);color:var(--sgds-purple-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);color:var(--sgds-color-subtle)}:host([variant=white][outlined]) .badge{background-color:var(--sgds-surface-fixed-light);border:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);color:var(--sgds-color-fixed-dark)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-24,24px);justify-content:center;line-height:var(--sgds-line-height-3-xs);max-width:var(--sgds-dimension-192,192px);min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);color:var(--sgds-primary-color-default)}.badge.full-width{max-width:100%}.badge-label{overflow:hidden;padding:var(--sgds-padding-none) var(--sgds-padding-3-xs);text-overflow:ellipsis;white-space:nowrap}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:inherit!important}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Badge/badge.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs.js","names":[],"sources":["../../../../src/components/Badge/badge.css"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n  cursor: default;\n}\n\n:host([variant=\"accent\"]) .badge {\n  background-color: var(--sgds-accent-surface-default);\n}\n\n:host([variant=\"success\"]) .badge {\n  background-color: var(--sgds-success-surface-default);\n}\n\n:host([variant=\"danger\"]) .badge {\n  background-color: var(--sgds-danger-surface-default);\n}\n\n:host([variant=\"warning\"]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-default);\n}\n\n:host([variant=\"cyan\"]) .badge {\n  background-color: var(--sgds-cyan-surface-default);\n}\n\n:host([variant=\"purple\"]) .badge {\n  background-color: var(--sgds-purple-surface-default);\n}\n\n:host([variant=\"neutral\"]) .badge {\n  background-color: var(--sgds-neutral-surface-default);\n}\n\n:host([variant=\"white\"]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-surface-fixed-light);\n}\n\n:host([variant=\"accent\"][outlined]) .badge {\n  color: var(--sgds-accent-color-fixed-dark);\n  background-color: var(--sgds-accent-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);\n}\n\n:host([variant=\"success\"][outlined]) .badge {\n  color: var(--sgds-success-color-fixed-dark);\n  background-color: var(--sgds-success-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);\n}\n\n:host([variant=\"danger\"][outlined]) .badge {\n  color: var(--sgds-danger-color-fixed-dark);\n  background-color: var(--sgds-danger-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);\n}\n\n:host([variant=\"warning\"][outlined]) .badge {\n  color: var(--sgds-warning-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);\n}\n\n:host([variant=\"cyan\"][outlined]) .badge {\n  color: var(--sgds-cyan-color-fixed-dark);\n  background-color: var(--sgds-cyan-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);\n}\n\n:host([variant=\"purple\"][outlined]) .badge {\n  color: var(--sgds-purple-color-fixed-dark);\n  background-color: var(--sgds-purple-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);\n}\n\n:host([variant=\"neutral\"][outlined]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-neutral-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);\n}\n\n:host([variant=\"white\"][outlined]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-surface-fixed-light);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nsgds-tooltip {\n  display: block;\n  max-width: 100%;\n}\n\n.badge {\n  background-color: var(--sgds-primary-surface-default);\n  color: var(--sgds-color-fixed-light);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-border-radius-sm);\n  font-size: var(--sgds-font-size-label-xs);\n  line-height: var(--sgds-line-height-3-xs);\n  height: var(--sgds-dimension-24, 24px);\n  min-width: var(--sgds-dimension-24);\n  max-width: var(--sgds-dimension-192, 192px);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--sgds-padding-none) var(--sgds-padding-xs);\n}\n\n.badge.outlined {\n  color: var(--sgds-primary-color-fixed-dark);\n  background-color: var(--sgds-primary-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);\n}\n.badge.full-width {\n  max-width: 100%;\n}\n\n.badge-label {\n  padding: var(--sgds-padding-none) var(--sgds-padding-3-xs);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.badge-dismissible {\n  padding-right: 0;\n}\n\n.badge-dimissible sgds-close-button {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n}\n\nslot::slotted(*) {\n  font-weight: inherit !important;\n  font-size: inherit !important;\n  line-height: inherit !important;\n  margin: inherit !important;\n  color: inherit !important;\n}\n"],"mappings":""}
+{"version":3,"file":"badge.cjs.js","names":[],"sources":["../../../../src/components/Badge/badge.css"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n  cursor: default;\n}\n\n:host([variant=\"accent\"]) .badge {\n  background-color: var(--sgds-accent-surface-default);\n}\n\n:host([variant=\"success\"]) .badge {\n  background-color: var(--sgds-success-surface-default);\n}\n\n:host([variant=\"danger\"]) .badge {\n  background-color: var(--sgds-danger-surface-default);\n}\n\n:host([variant=\"warning\"]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-default);\n}\n\n:host([variant=\"cyan\"]) .badge {\n  background-color: var(--sgds-cyan-surface-default);\n}\n\n:host([variant=\"purple\"]) .badge {\n  background-color: var(--sgds-purple-surface-default);\n}\n\n:host([variant=\"neutral\"]) .badge {\n  background-color: var(--sgds-neutral-surface-default);\n}\n\n:host([variant=\"white\"]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-surface-fixed-light);\n}\n\n:host([variant=\"accent\"][outlined]) .badge {\n  color: var(--sgds-accent-color-default);\n  background-color: var(--sgds-accent-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);\n}\n\n:host([variant=\"success\"][outlined]) .badge {\n  color: var(--sgds-success-color-default);\n  background-color: var(--sgds-success-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);\n}\n\n:host([variant=\"danger\"][outlined]) .badge {\n  color: var(--sgds-danger-color-default);\n  background-color: var(--sgds-danger-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);\n}\n\n:host([variant=\"warning\"][outlined]) .badge {\n  color: var(--sgds-warning-color-default);\n  background-color: var(--sgds-warning-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);\n}\n\n:host([variant=\"cyan\"][outlined]) .badge {\n  color: var(--sgds-cyan-color-default);\n  background-color: var(--sgds-cyan-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);\n}\n\n:host([variant=\"purple\"][outlined]) .badge {\n  color: var(--sgds-purple-color-default);\n  background-color: var(--sgds-purple-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);\n}\n\n:host([variant=\"neutral\"][outlined]) .badge {\n  color: var(--sgds-color-subtle);\n  background-color: var(--sgds-neutral-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);\n}\n\n:host([variant=\"white\"][outlined]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-surface-fixed-light);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n}\n\nsgds-tooltip {\n  display: block;\n  max-width: 100%;\n}\n\n.badge {\n  background-color: var(--sgds-primary-surface-default);\n  color: var(--sgds-color-fixed-light);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-border-radius-sm);\n  font-size: var(--sgds-font-size-label-xs);\n  line-height: var(--sgds-line-height-3-xs);\n  height: var(--sgds-dimension-24, 24px);\n  min-width: var(--sgds-dimension-24);\n  max-width: var(--sgds-dimension-192, 192px);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--sgds-padding-none) var(--sgds-padding-xs);\n}\n\n.badge.outlined {\n  color: var(--sgds-primary-color-default);\n  background-color: var(--sgds-primary-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);\n}\n.badge.full-width {\n  max-width: 100%;\n}\n\n.badge-label {\n  padding: var(--sgds-padding-none) var(--sgds-padding-3-xs);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.badge-dismissible {\n  padding-right: 0;\n}\n\n.badge-dimissible sgds-close-button {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n}\n\nslot::slotted(*) {\n  font-weight: inherit !important;\n  font-size: inherit !important;\n  line-height: inherit !important;\n  margin: inherit !important;\n  color: inherit !important;\n}\n"],"mappings":""}

package/react/components/Badge/badge.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Badge/badge.css
-var css_248z = css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=accent]) .badge{background-color:var(--sgds-accent-surface-default)}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=cyan]) .badge{background-color:var(--sgds-cyan-surface-default)}:host([variant=purple]) .badge{background-color:var(--sgds-purple-surface-default)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=white]) .badge{background-color:var(--sgds-surface-fixed-light);color:var(--sgds-color-fixed-dark)}:host([variant=accent][outlined]) .badge{background-color:var(--sgds-accent-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);color:var(--sgds-accent-color-fixed-dark)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);color:var(--sgds-success-color-fixed-dark)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);color:var(--sgds-danger-color-fixed-dark)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);color:var(--sgds-warning-color-fixed-dark)}:host([variant=cyan][outlined]) .badge{background-color:var(--sgds-cyan-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);color:var(--sgds-cyan-color-fixed-dark)}:host([variant=purple][outlined]) .badge{background-color:var(--sgds-purple-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);color:var(--sgds-purple-color-fixed-dark)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);color:var(--sgds-color-fixed-dark)}:host([variant=white][outlined]) .badge{background-color:var(--sgds-surface-fixed-light);border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);color:var(--sgds-color-fixed-dark)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-24,24px);justify-content:center;line-height:var(--sgds-line-height-3-xs);max-width:var(--sgds-dimension-192,192px);min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);color:var(--sgds-primary-color-fixed-dark)}.badge.full-width{max-width:100%}.badge-label{overflow:hidden;padding:var(--sgds-padding-none) var(--sgds-padding-3-xs);text-overflow:ellipsis;white-space:nowrap}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:inherit!important}`;
+var css_248z = css`:host{cursor:default;display:inline-flex;max-width:100%}:host([variant=accent]) .badge{background-color:var(--sgds-accent-surface-default)}:host([variant=success]) .badge{background-color:var(--sgds-success-surface-default)}:host([variant=danger]) .badge{background-color:var(--sgds-danger-surface-default)}:host([variant=warning]) .badge{background-color:var(--sgds-warning-surface-default);color:var(--sgds-color-fixed-dark)}:host([variant=cyan]) .badge{background-color:var(--sgds-cyan-surface-default)}:host([variant=purple]) .badge{background-color:var(--sgds-purple-surface-default)}:host([variant=neutral]) .badge{background-color:var(--sgds-neutral-surface-default)}:host([variant=white]) .badge{background-color:var(--sgds-surface-fixed-light);color:var(--sgds-color-fixed-dark)}:host([variant=accent][outlined]) .badge{background-color:var(--sgds-accent-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);color:var(--sgds-accent-color-default)}:host([variant=success][outlined]) .badge{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);color:var(--sgds-success-color-default)}:host([variant=danger][outlined]) .badge{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);color:var(--sgds-danger-color-default)}:host([variant=warning][outlined]) .badge{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);color:var(--sgds-warning-color-default)}:host([variant=cyan][outlined]) .badge{background-color:var(--sgds-cyan-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);color:var(--sgds-cyan-color-default)}:host([variant=purple][outlined]) .badge{background-color:var(--sgds-purple-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);color:var(--sgds-purple-color-default)}:host([variant=neutral][outlined]) .badge{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);color:var(--sgds-color-subtle)}:host([variant=white][outlined]) .badge{background-color:var(--sgds-surface-fixed-light);border:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);color:var(--sgds-color-fixed-dark)}sgds-tooltip{display:block;max-width:100%}.badge{align-items:center;background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-sm);color:var(--sgds-color-fixed-light);display:inline-flex;font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-24,24px);justify-content:center;line-height:var(--sgds-line-height-3-xs);max-width:var(--sgds-dimension-192,192px);min-width:var(--sgds-dimension-24);padding:var(--sgds-padding-none) var(--sgds-padding-xs)}.badge.outlined{background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);color:var(--sgds-primary-color-default)}.badge.full-width{max-width:100%}.badge-label{overflow:hidden;padding:var(--sgds-padding-none) var(--sgds-padding-3-xs);text-overflow:ellipsis;white-space:nowrap}.badge-dismissible{padding-right:0}.badge-dimissible sgds-close-button{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm)}slot::slotted(*){color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;margin:inherit!important}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../../../src/components/Badge/badge.css"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n  cursor: default;\n}\n\n:host([variant=\"accent\"]) .badge {\n  background-color: var(--sgds-accent-surface-default);\n}\n\n:host([variant=\"success\"]) .badge {\n  background-color: var(--sgds-success-surface-default);\n}\n\n:host([variant=\"danger\"]) .badge {\n  background-color: var(--sgds-danger-surface-default);\n}\n\n:host([variant=\"warning\"]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-default);\n}\n\n:host([variant=\"cyan\"]) .badge {\n  background-color: var(--sgds-cyan-surface-default);\n}\n\n:host([variant=\"purple\"]) .badge {\n  background-color: var(--sgds-purple-surface-default);\n}\n\n:host([variant=\"neutral\"]) .badge {\n  background-color: var(--sgds-neutral-surface-default);\n}\n\n:host([variant=\"white\"]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-surface-fixed-light);\n}\n\n:host([variant=\"accent\"][outlined]) .badge {\n  color: var(--sgds-accent-color-fixed-dark);\n  background-color: var(--sgds-accent-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);\n}\n\n:host([variant=\"success\"][outlined]) .badge {\n  color: var(--sgds-success-color-fixed-dark);\n  background-color: var(--sgds-success-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);\n}\n\n:host([variant=\"danger\"][outlined]) .badge {\n  color: var(--sgds-danger-color-fixed-dark);\n  background-color: var(--sgds-danger-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);\n}\n\n:host([variant=\"warning\"][outlined]) .badge {\n  color: var(--sgds-warning-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);\n}\n\n:host([variant=\"cyan\"][outlined]) .badge {\n  color: var(--sgds-cyan-color-fixed-dark);\n  background-color: var(--sgds-cyan-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);\n}\n\n:host([variant=\"purple\"][outlined]) .badge {\n  color: var(--sgds-purple-color-fixed-dark);\n  background-color: var(--sgds-purple-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);\n}\n\n:host([variant=\"neutral\"][outlined]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-neutral-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);\n}\n\n:host([variant=\"white\"][outlined]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-surface-fixed-light);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\nsgds-tooltip {\n  display: block;\n  max-width: 100%;\n}\n\n.badge {\n  background-color: var(--sgds-primary-surface-default);\n  color: var(--sgds-color-fixed-light);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-border-radius-sm);\n  font-size: var(--sgds-font-size-label-xs);\n  line-height: var(--sgds-line-height-3-xs);\n  height: var(--sgds-dimension-24, 24px);\n  min-width: var(--sgds-dimension-24);\n  max-width: var(--sgds-dimension-192, 192px);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--sgds-padding-none) var(--sgds-padding-xs);\n}\n\n.badge.outlined {\n  color: var(--sgds-primary-color-fixed-dark);\n  background-color: var(--sgds-primary-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);\n}\n.badge.full-width {\n  max-width: 100%;\n}\n\n.badge-label {\n  padding: var(--sgds-padding-none) var(--sgds-padding-3-xs);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.badge-dismissible {\n  padding-right: 0;\n}\n\n.badge-dimissible sgds-close-button {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n}\n\nslot::slotted(*) {\n  font-weight: inherit !important;\n  font-size: inherit !important;\n  line-height: inherit !important;\n  margin: inherit !important;\n  color: inherit !important;\n}\n"],"mappings":""}
+{"version":3,"file":"badge.js","names":[],"sources":["../../../../src/components/Badge/badge.css"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n  cursor: default;\n}\n\n:host([variant=\"accent\"]) .badge {\n  background-color: var(--sgds-accent-surface-default);\n}\n\n:host([variant=\"success\"]) .badge {\n  background-color: var(--sgds-success-surface-default);\n}\n\n:host([variant=\"danger\"]) .badge {\n  background-color: var(--sgds-danger-surface-default);\n}\n\n:host([variant=\"warning\"]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-default);\n}\n\n:host([variant=\"cyan\"]) .badge {\n  background-color: var(--sgds-cyan-surface-default);\n}\n\n:host([variant=\"purple\"]) .badge {\n  background-color: var(--sgds-purple-surface-default);\n}\n\n:host([variant=\"neutral\"]) .badge {\n  background-color: var(--sgds-neutral-surface-default);\n}\n\n:host([variant=\"white\"]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-surface-fixed-light);\n}\n\n:host([variant=\"accent\"][outlined]) .badge {\n  color: var(--sgds-accent-color-default);\n  background-color: var(--sgds-accent-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-accent-border-color-muted);\n}\n\n:host([variant=\"success\"][outlined]) .badge {\n  color: var(--sgds-success-color-default);\n  background-color: var(--sgds-success-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);\n}\n\n:host([variant=\"danger\"][outlined]) .badge {\n  color: var(--sgds-danger-color-default);\n  background-color: var(--sgds-danger-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);\n}\n\n:host([variant=\"warning\"][outlined]) .badge {\n  color: var(--sgds-warning-color-default);\n  background-color: var(--sgds-warning-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);\n}\n\n:host([variant=\"cyan\"][outlined]) .badge {\n  color: var(--sgds-cyan-color-default);\n  background-color: var(--sgds-cyan-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-cyan-border-color-muted);\n}\n\n:host([variant=\"purple\"][outlined]) .badge {\n  color: var(--sgds-purple-color-default);\n  background-color: var(--sgds-purple-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-purple-border-color-muted);\n}\n\n:host([variant=\"neutral\"][outlined]) .badge {\n  color: var(--sgds-color-subtle);\n  background-color: var(--sgds-neutral-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);\n}\n\n:host([variant=\"white\"][outlined]) .badge {\n  color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-surface-fixed-light);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);\n}\n\nsgds-tooltip {\n  display: block;\n  max-width: 100%;\n}\n\n.badge {\n  background-color: var(--sgds-primary-surface-default);\n  color: var(--sgds-color-fixed-light);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-border-radius-sm);\n  font-size: var(--sgds-font-size-label-xs);\n  line-height: var(--sgds-line-height-3-xs);\n  height: var(--sgds-dimension-24, 24px);\n  min-width: var(--sgds-dimension-24);\n  max-width: var(--sgds-dimension-192, 192px);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: var(--sgds-padding-none) var(--sgds-padding-xs);\n}\n\n.badge.outlined {\n  color: var(--sgds-primary-color-default);\n  background-color: var(--sgds-primary-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);\n}\n.badge.full-width {\n  max-width: 100%;\n}\n\n.badge-label {\n  padding: var(--sgds-padding-none) var(--sgds-padding-3-xs);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n\n.badge-dismissible {\n  padding-right: 0;\n}\n\n.badge-dimissible sgds-close-button {\n  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);\n}\n\nslot::slotted(*) {\n  font-weight: inherit !important;\n  font-size: inherit !important;\n  line-height: inherit !important;\n  margin: inherit !important;\n  color: inherit !important;\n}\n"],"mappings":""}

package/react/components/Badge/sgds-badge.cjs.js

@@ -70,8 +70,13 @@ var SgdsBadge = class extends require_sgds_element.default {
 	_handleLabelSlotChange(e) {
 		this.text = require_slot.getTextContent(e.target);
 	}
+	get _closeButtonTone() {
+		if (this.variant === "white") return "fixed-dark";
+		if (this.outlined) return "default";
+		if (this.variant === "warning") return "fixed-dark";
+		return "fixed-light";
+	}
 	_renderBadge() {
-		const isDarkCloseButton = this.outlined || this.variant === "warning" || this.variant === "white";
 		return lit.html`<div
       class="  
           ${(0, lit_directives_class_map_js.classMap)({
@@ -92,7 +97,7 @@ var SgdsBadge = class extends require_sgds_element.default {
             size="sm"
             aria-label="close the badge"
             @click=${this.close}
-            tone=${isDarkCloseButton ? "fixed-dark" : "fixed-light"}
+            tone=${this._closeButtonTone}
           ></sgds-close-button>` : lit.nothing}
     </div>`;
 	}

package/react/components/Badge/sgds-badge.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.cjs.js","names":["SgdsElement","badgeStyle","SgdsCloseButton","SgdsTooltip","getTextContent","classMap","nothing","property","state","watch"],"sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\", { waitUntilFirstUpdate: true })\n  _handleTruncation() {\n    // check scroll width if its exceeding parent, it reflects truncation has happened\n    const badgeLabel = this.shadowRoot?.querySelector(\".badge-label\");\n    if (badgeLabel) {\n      this.truncated = badgeLabel.scrollWidth > badgeLabel.clientWidth;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    const isDarkCloseButton = this.outlined || this.variant === \"warning\" || this.variant === \"white\";\n\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            tone=${isDarkCloseButton ? \"fixed-dark\" : \"fixed-light\"}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-badge.cjs.js","names":["SgdsElement","badgeStyle","SgdsCloseButton","SgdsTooltip","getTextContent","classMap","nothing","property","state","watch"],"sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\", { waitUntilFirstUpdate: true })\n  _handleTruncation() {\n    // check scroll width if its exceeding parent, it reflects truncation has happened\n    const badgeLabel = this.shadowRoot?.querySelector(\".badge-label\");\n    if (badgeLabel) {\n      this.truncated = badgeLabel.scrollWidth > badgeLabel.clientWidth;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private get _closeButtonTone() {\n    if (this.variant === \"white\") return \"fixed-dark\";\n    if (this.outlined) return \"default\";\n    if (this.variant === \"warning\") return \"fixed-dark\";\n    return \"fixed-light\";\n  }\n\n  private _renderBadge() {\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            tone=${this._closeButtonTone}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"mappings":"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"}

package/react/components/Badge/sgds-badge.js

@@ -70,8 +70,13 @@ var SgdsBadge = class extends SgdsElement {
 	_handleLabelSlotChange(e) {
 		this.text = getTextContent(e.target);
 	}
+	get _closeButtonTone() {
+		if (this.variant === "white") return "fixed-dark";
+		if (this.outlined) return "default";
+		if (this.variant === "warning") return "fixed-dark";
+		return "fixed-light";
+	}
 	_renderBadge() {
-		const isDarkCloseButton = this.outlined || this.variant === "warning" || this.variant === "white";
 		return html`<div
       class="  
           ${classMap({
@@ -92,7 +97,7 @@ var SgdsBadge = class extends SgdsElement {
             size="sm"
             aria-label="close the badge"
             @click=${this.close}
-            tone=${isDarkCloseButton ? "fixed-dark" : "fixed-light"}
+            tone=${this._closeButtonTone}
           ></sgds-close-button>` : nothing}
     </div>`;
 	}

package/react/components/Badge/sgds-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-badge.js","names":["badgeStyle"],"sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\", { waitUntilFirstUpdate: true })\n  _handleTruncation() {\n    // check scroll width if its exceeding parent, it reflects truncation has happened\n    const badgeLabel = this.shadowRoot?.querySelector(\".badge-label\");\n    if (badgeLabel) {\n      this.truncated = badgeLabel.scrollWidth > badgeLabel.clientWidth;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private _renderBadge() {\n    const isDarkCloseButton = this.outlined || this.variant === \"warning\" || this.variant === \"white\";\n\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            tone=${isDarkCloseButton ? \"fixed-dark\" : \"fixed-light\"}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,IAAa,YAAb,cAA+B,YAAY;;;EAUU,KAAA,OAAA;EAQE,KAAA,UAAA;EAGE,KAAA,WAAA;EAGG,KAAA,cAAA;EAGF,KAAA,YAAA;EAE3B,KAAA,YAAA;EACL,KAAA,OAAA;;;EA7BR,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAU;;;EAG5B,KAAA,eAAA;GACpB,qBAAqB;GACrB,gBAAgB;EAClB;;;CA0BA,QAAe;EACb,KAAK,OAAO;CACd;;CAGA,oBACoB;EAClB,IAAI,KAAK,MAAM;GAEb,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GAGA,KAAK,KAAK,iBAAiB;EAC7B,OAAO;GAEL,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GAGA,KAAK,KAAK,iBAAiB;EAC7B;CACF;;CAGA,oBACoB;EAElB,MAAM,aAAa,KAAK,YAAY,cAAc,cAAc;EAChE,IAAI,YACF,KAAK,YAAY,WAAW,cAAc,WAAW;CAEzD;CAEA,uBAA+B,GAAU;EACvC,KAAK,OAAO,eAAe,EAAE,MAAyB;CAExD;CAEA,eAAuB;EACrB,MAAM,oBAAoB,KAAK,YAAY,KAAK,YAAY,aAAa,KAAK,YAAY;EAE1F,OAAO,IAAI;;YAEH,SAAS;IACZ,sBAAsB,KAAK;GAC5B,OAAO;GACP,UAAU,KAAK;GACf,cAAc,KAAK;EACrB,CAAC,EAAE;oBACW,KAAK,OAAO,UAAU,OAAO;;QAEzC,CAAC,KAAK,cAAc,IAAI,8BAA8B,QAAQ;;;4BAG1C,KAAK,uBAAuB;;;QAGhD,KAAK,cACH,IAAI;;;qBAGO,KAAK,MAAM;mBACb,oBAAoB,eAAe,cAAc;mCAE1D,QAAQ;;CAEhB;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,KAAK,YACH,IAAI,yBAAyB,KAAK,KAAK,eAAc,MAAK,EAAE,gBAAgB,EAAE;eACzE,KAAK,aAAa,EAAE;eAEzB,KAAK,aAAa,IACpB;CACN;AACF;AAzGG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAQzC,WAAA,CAAA,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,MAAM,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAQN,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA;AAwBZ,WAAA,CAAA,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}
+{"version":3,"file":"sgds-badge.js","names":["badgeStyle"],"sources":["../../../../src/components/Badge/sgds-badge.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\nimport { watch } from \"../../utils/watch\";\nimport badgeStyle from \"./badge.css\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsTooltip from \"../Tooltip/sgds-tooltip\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\n\nimport { getTextContent } from \"../../utils/slot\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"danger\"\n  | \"warning\"\n  | \"cyan\"\n  | \"purple\"\n  | \"neutral\"\n  | \"white\"\n  | \"info\";\n\n/**\n * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.\n * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.\n *\n * @slot default - slot for badge\n * @slot icon - The slot for icon to the left of the badge text\n *\n * @event sgds-show - Emitted when the badge appears.\n * @event sgds-hide - Emitted when the badge is starting to close but has not closed.\n * @event sgds-after-show - Emitted after the badge has appeared\n * @event sgds-after-hide - Emitted after the badge has closed\n */\nexport class SgdsBadge extends SgdsElement {\n  static styles = [...SgdsElement.styles, badgeStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-tooltip\": SgdsTooltip\n  };\n\n  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /**\n   * One or more badge variant combinations.\n   * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.\n   *\n   * (@deprecated) The `info` variant is deprecated. Use `primary` instead.\n   */\n  @property({ reflect: true }) variant: BadgeVariant = \"primary\";\n\n  /** Manually set the outlined state to false */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** Manually set the dismissible state of the button to `false` */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Manually enable full width */\n  @property({ type: Boolean, reflect: true }) fullWidth = false;\n\n  @state() private truncated = false;\n  @state() private text = \"\";\n\n  /** Closes the badge  */\n  public close() {\n    this.show = false;\n  }\n\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    if (this.show) {\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.show = false;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.show = true;\n        return;\n      }\n      // animations if any go here\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  /**@internal */\n  @watch(\"text\", { waitUntilFirstUpdate: true })\n  _handleTruncation() {\n    // check scroll width if its exceeding parent, it reflects truncation has happened\n    const badgeLabel = this.shadowRoot?.querySelector(\".badge-label\");\n    if (badgeLabel) {\n      this.truncated = badgeLabel.scrollWidth > badgeLabel.clientWidth;\n    }\n  }\n\n  private _handleLabelSlotChange(e: Event) {\n    this.text = getTextContent(e.target as HTMLSlotElement);\n    return;\n  }\n\n  private get _closeButtonTone() {\n    if (this.variant === \"white\") return \"fixed-dark\";\n    if (this.outlined) return \"default\";\n    if (this.variant === \"warning\") return \"fixed-dark\";\n    return \"fixed-light\";\n  }\n\n  private _renderBadge() {\n    return html`<div\n      class=\"  \n          ${classMap({\n        [`badge-dismissible`]: this.dismissible,\n        badge: true,\n        outlined: this.outlined,\n        \"full-width\": this.fullWidth\n      })}\"\n      aria-hidden=${this.show ? \"false\" : \"true\"}\n    >\n      ${!this.dismissible ? html`<slot name=\"icon\"></slot>` : nothing}\n\n      <span class=\"badge-label\">\n        <slot @slotchange=${this._handleLabelSlotChange}></slot>\n      </span>\n\n      ${this.dismissible\n        ? html`<sgds-close-button\n            size=\"sm\"\n            aria-label=\"close the badge\"\n            @click=${this.close}\n            tone=${this._closeButtonTone}\n          ></sgds-close-button>`\n        : nothing}\n    </div>`;\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? this.truncated\n        ? html`<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}\n            >${this._renderBadge()}</sgds-tooltip\n          >`\n        : this._renderBadge()\n      : nothing;\n  }\n}\n\nexport default SgdsBadge;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,IAAa,YAAb,cAA+B,YAAY;;;EAUU,KAAA,OAAA;EAQE,KAAA,UAAA;EAGE,KAAA,WAAA;EAGG,KAAA,cAAA;EAGF,KAAA,YAAA;EAE3B,KAAA,YAAA;EACL,KAAA,OAAA;;;EA7BR,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAU;;;EAG5B,KAAA,eAAA;GACpB,qBAAqB;GACrB,gBAAgB;EAClB;;;CA0BA,QAAe;EACb,KAAK,OAAO;CACd;;CAGA,oBACoB;EAClB,IAAI,KAAK,MAAM;GAEb,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GAGA,KAAK,KAAK,iBAAiB;EAC7B,OAAO;GAEL,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,OAAO;IACZ;GACF;GAGA,KAAK,KAAK,iBAAiB;EAC7B;CACF;;CAGA,oBACoB;EAElB,MAAM,aAAa,KAAK,YAAY,cAAc,cAAc;EAChE,IAAI,YACF,KAAK,YAAY,WAAW,cAAc,WAAW;CAEzD;CAEA,uBAA+B,GAAU;EACvC,KAAK,OAAO,eAAe,EAAE,MAAyB;CAExD;CAEA,IAAY,mBAAmB;EAC7B,IAAI,KAAK,YAAY,SAAS,OAAO;EACrC,IAAI,KAAK,UAAU,OAAO;EAC1B,IAAI,KAAK,YAAY,WAAW,OAAO;EACvC,OAAO;CACT;CAEA,eAAuB;EACrB,OAAO,IAAI;;YAEH,SAAS;IACZ,sBAAsB,KAAK;GAC5B,OAAO;GACP,UAAU,KAAK;GACf,cAAc,KAAK;EACrB,CAAC,EAAE;oBACW,KAAK,OAAO,UAAU,OAAO;;QAEzC,CAAC,KAAK,cAAc,IAAI,8BAA8B,QAAQ;;;4BAG1C,KAAK,uBAAuB;;;QAGhD,KAAK,cACH,IAAI;;;qBAGO,KAAK,MAAM;mBACb,KAAK,iBAAiB;mCAE/B,QAAQ;;CAEhB;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,KAAK,YACH,IAAI,yBAAyB,KAAK,KAAK,eAAc,MAAK,EAAE,gBAAgB,EAAE;eACzE,KAAK,aAAa,EAAE;eAEzB,KAAK,aAAa,IACpB;CACN;AACF;AA9GG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAQzC,WAAA,CAAA,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,MAAM,CAAA,GAAA,UAAA,WAAA,aAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAQN,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA;AAwBZ,WAAA,CAAA,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}

package/react/components/DataTable/sgds-data-table.cjs.js

@@ -202,21 +202,7 @@ var SgdsDataTable = class extends require_sgds_element.default {
 		if (columnIndex < 0) return;
 		if (direction === "none") {
 			this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);
-			this._syncDomRowOrder();
-			this._updateVisibleRows();
-			return;
-		}
-		if (this.mode === "client") {
-			const start = (this.currentPage - 1) * this.itemsPerPage;
-			const end = start + this.itemsPerPage;
-			const nextRows = [...this.tableRows];
-			const sortedVisibleRows = nextRows.slice(start, end).sort((left, right) => {
-				const leftValue = this._toComparableValue(left, key, columnIndex);
-				const rightValue = this._toComparableValue(right, key, columnIndex);
-				return this._compareValues(leftValue, rightValue, direction);
-			});
-			nextRows.splice(start, sortedVisibleRows.length, ...sortedVisibleRows);
-			this.tableRows = nextRows;
+			if (this.mode === "client") this.currentPage = 1;
 			this._syncDomRowOrder();
 			this._updateVisibleRows();
 			return;
@@ -226,6 +212,7 @@ var SgdsDataTable = class extends require_sgds_element.default {
 			const rightValue = this._toComparableValue(right, key, columnIndex);
 			return this._compareValues(leftValue, rightValue, direction);
 		});
+		if (this.mode === "client") this.currentPage = 1;
 		this._syncDomRowOrder();
 		this._updateVisibleRows();
 	}

package/react/components/DataTable/sgds-data-table.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-data-table.cjs.js","names":["SgdsElement","tableStyle","SgdsPagination","SgdsDataTableCell","SgdsDataTableHead","SgdsSkeleton","SgdsDataTableRow","nothing","property","state"],"sources":["../../../../src/components/DataTable/sgds-data-table.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./data-table.css\";\nimport SgdsPagination from \"../Pagination/sgds-pagination\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"../Pagination/sgds-pagination\";\nimport SgdsDataTableRow from \"./sgds-data-table-row\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\nimport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail } from \"./types\";\nexport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail };\n\n/**\n * @summary A data table container with pagination, row selection, loading, and sorting support.\n *\n * @slot default - Insert one or more `sgds-data-table-row` elements.\n * @slot no-data - Custom content rendered when no body rows are available and `loading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: Record<string, string>[] }`.\n * @event sgds-sort - Emitted when `serverSort` is true and a sorting column header is clicked.\n * Detail: `{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }`.\n * @event sgds-page-change - Emitted when pagination changes page.\n */\nexport class SgdsDataTable extends SgdsElement {\n  static styles = [\n    ...SgdsElement.styles,\n    tableStyle,\n    css`\n      :host {\n        display: block;\n      }\n    `\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-pagination\": SgdsPagination,\n    \"sgds-data-table-cell\": SgdsDataTableCell,\n    \"sgds-data-table-head\": SgdsDataTableHead,\n    \"sgds-skeleton\": SgdsSkeleton\n  };\n\n  /** If true, renders a checkbox column for row selection. */\n  @property({ type: Boolean }) multiSelect = false;\n\n  /** Total number of data items (for server-side pagination). */\n  @property({ type: Number }) dataLength = 0;\n\n  /** Current page (1-based). */\n  @property({ type: Number }) currentPage = 1;\n\n  /** Number of rows per page. */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Custom text shown on the footer's left side. */\n  @property({ type: String }) paginationSummary = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) loading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Pagination mode. `client` (default) slices rows and renders pagination controls.\n   * `server` renders all slotted rows as-is — the caller is responsible for passing\n   * the correct page of data and handling `sgds-page-change` externally.\n   */\n  @property({ type: String }) mode: \"client\" | \"server\" = \"client\";\n\n  @state() private tableRows: SgdsDataTableRow[] = [];\n  @state() private headerRows: SgdsDataTableRow[] = [];\n\n  private _headerCells: SgdsDataTableHead[] = [];\n  private _initialRowPositions = new WeakMap<SgdsDataTableRow, number>();\n  private _hasCapturedInitialRowPositions = false;\n\n  private _rowHandlers = new WeakMap<SgdsDataTableRow, EventListener>();\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  private _isRowChecked(row: SgdsDataTableRow) {\n    return row.checked || row.checkbox?.checked === true;\n  }\n\n  private _updateHeaderCheckbox() {\n    const checkedCount = this.tableRows.filter(r => this._isRowChecked(r)).length;\n\n    const allChecked = checkedCount === this.tableRows.length && checkedCount > 0;\n\n    this.headerRows.forEach(r => {\n      r.checked = allChecked;\n      if (r.checkbox) {\n        r.checkbox.checked = allChecked;\n        r.checkbox.indeterminate = checkedCount > 0 && !allChecked;\n      }\n    });\n  }\n\n  private async _syncHeaderCheckboxAfterRender() {\n    if (!this.multiSelect || this.headerRows.length === 0) return;\n\n    const rows = [...this.headerRows, ...this.tableRows];\n    await Promise.all(rows.map(row => row.updateComplete));\n    this._updateHeaderCheckbox();\n  }\n\n  private _emitRowSelect() {\n    const selected = this.tableRows.filter(r => this._isRowChecked(r)).map(r => this._getRowData(r));\n    this.emit(\"sgds-row-select\", { detail: { selected } });\n  }\n\n  private _attachRowListener(row: SgdsDataTableRow) {\n    const old = this._rowHandlers.get(row);\n    if (old) row.removeEventListener(\"i-sgds-change\", old);\n\n    const handler: EventListener = (e: Event) => {\n      const { checked } = (e as CustomEvent<{ checked: boolean }>).detail;\n\n      if (this.headerRows.includes(row)) {\n        this.tableRows.forEach(r => {\n          r.checked = checked;\n          if (r.checkbox) r.checkbox.checked = checked;\n        });\n      } else {\n        row.checked = checked;\n        this._updateHeaderCheckbox();\n      }\n      this._emitRowSelect();\n    };\n\n    this._rowHandlers.set(row, handler);\n    row.addEventListener(\"i-sgds-change\", handler);\n  }\n\n  private _configureRows() {\n    const hasExpand = this.tableRows.some(r => r.expand);\n    const hasDataRows = this.tableRows.length > 0;\n\n    this.headerRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = hasExpand;\n      row.hasDataRows = hasDataRows;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    this.tableRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = !row.expand && hasExpand;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    if (this.multiSelect) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n\n    this._applyColumnAlignment();\n  }\n\n  private _applyColumnAlignment() {\n    const headerAlignments = this._headerCells.reduce<Array<\"left\" | \"right\">>((acc, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      const alignment = header.textAlign ?? \"left\";\n      for (let i = 0; i < span; i++) {\n        acc.push(alignment);\n      }\n      return acc;\n    }, []);\n\n    this.headerRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n\n    this.tableRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n  }\n\n  private _extractCellText(row: SgdsDataTableRow, columnIndex: number) {\n    const rowCellText = row.getCellText(columnIndex);\n    if (rowCellText) return rowCellText;\n\n    const cells = Array.from(row.children).filter(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    const cell = cells[columnIndex];\n    return (cell?.textContent || \"\").trim();\n  }\n\n  private _getRowData(row: SgdsDataTableRow): Record<string, string> {\n    const data: Record<string, string> = {};\n    this._headerCells.forEach((header, index) => {\n      const key = header.sortKey || (header.textContent ?? \"\").trim() || `col-${index}`;\n      data[key] = this._extractCellText(row, index);\n    });\n    return data;\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, _key: string, columnIndex: number) {\n    return this._extractCellText(row, columnIndex);\n  }\n\n  private _compareValues(left: unknown, right: unknown, direction: \"ascending\" | \"descending\") {\n    if (left === right) return 0;\n\n    const leftNumber = Number(left);\n    const rightNumber = Number(right);\n    const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);\n\n    if (bothNumeric) {\n      return direction === \"ascending\" ? leftNumber - rightNumber : rightNumber - leftNumber;\n    }\n\n    const cmp = String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: \"base\" });\n    return direction === \"ascending\" ? cmp : -cmp;\n  }\n\n  private _resetOtherHeaderSortStates(activeHeader: SgdsDataTableHead | null) {\n    this._headerCells.forEach(header => {\n      if (header !== activeHeader && header.sorting) {\n        header.sortDirection = \"none\";\n      }\n    });\n  }\n\n  private _getRowsInInitialPositionOrder(rows: SgdsDataTableRow[]) {\n    return [...rows].sort((left, right) => {\n      const leftPosition = this._initialRowPositions.get(left);\n      const rightPosition = this._initialRowPositions.get(right);\n\n      if (leftPosition === undefined && rightPosition === undefined) return 0;\n      if (leftPosition === undefined) return 1;\n      if (rightPosition === undefined) return -1;\n      return leftPosition - rightPosition;\n    });\n  }\n\n  private _captureInitialRowPositions(rows: SgdsDataTableRow[]) {\n    if (this._hasCapturedInitialRowPositions) return;\n\n    rows.forEach((row, index) => {\n      this._initialRowPositions.set(row, index);\n    });\n\n    this._hasCapturedInitialRowPositions = true;\n  }\n\n  private _handleSort(e: Event) {\n    const activeHeader = e.composedPath().find(node => node instanceof SgdsDataTableHead) as\n      | SgdsDataTableHead\n      | undefined;\n\n    if (!activeHeader || !activeHeader.sorting) return;\n\n    const { key, direction } = (e as CustomEvent<ISgdsDataTableSortEventDetail>).detail;\n    const columnIndex = activeHeader ? this._headerCells.indexOf(activeHeader) : -1;\n\n    this._resetOtherHeaderSortStates(activeHeader);\n\n    if (this.serverSort) {\n      e.stopPropagation();\n      this.emit(\"sgds-sort\", { detail: { key, direction } });\n      return;\n    }\n\n    if (columnIndex < 0) return;\n\n    if (direction === \"none\") {\n      this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    if (this.mode === \"client\") {\n      const start = (this.currentPage - 1) * this.itemsPerPage;\n      const end = start + this.itemsPerPage;\n      const nextRows = [...this.tableRows];\n\n      const sortedVisibleRows = nextRows.slice(start, end).sort((left, right) => {\n        const leftValue = this._toComparableValue(left, key, columnIndex);\n        const rightValue = this._toComparableValue(right, key, columnIndex);\n        return this._compareValues(leftValue, rightValue, direction);\n      });\n      nextRows.splice(start, sortedVisibleRows.length, ...sortedVisibleRows);\n\n      this.tableRows = nextRows;\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    this.tableRows = [...this.tableRows].sort((left, right) => {\n      const leftValue = this._toComparableValue(left, key, columnIndex);\n      const rightValue = this._toComparableValue(right, key, columnIndex);\n      return this._compareValues(leftValue, rightValue, direction);\n    });\n\n    this._syncDomRowOrder();\n    this._updateVisibleRows();\n  }\n\n  private _syncDomRowOrder() {\n    const parent = this.tableRows[0]?.parentElement;\n    if (!parent) return;\n    this.tableRows.forEach(row => parent.appendChild(row));\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slotted = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(el => el instanceof SgdsDataTableRow) as SgdsDataTableRow[];\n\n    const rowTableChildren = (row: SgdsDataTableRow) =>\n      Array.from(row.children).filter(child => {\n        const tagName = child.tagName.toLowerCase();\n        const isTableCell = tagName === \"sgds-data-table-cell\" || tagName === \"sgds-data-table-head\";\n        if (!isTableCell) return false;\n        return child.getAttribute(\"slot\") !== \"content\";\n      });\n\n    this.headerRows = slotted.filter(row =>\n      rowTableChildren(row).some(child => child.tagName.toLowerCase() === \"sgds-data-table-head\")\n    );\n\n    this.tableRows = slotted.filter(row => {\n      const children = rowTableChildren(row);\n      return children.length > 0 && children.every(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    });\n\n    this._headerCells = this.headerRows.reduce<SgdsDataTableHead[]>((acc, row) => {\n      const headers = Array.from(row.children).filter(\n        child => child instanceof SgdsDataTableHead\n      ) as SgdsDataTableHead[];\n      acc.push(...headers);\n      return acc;\n    }, []);\n\n    this._captureInitialRowPositions(this.tableRows);\n\n    this._headerCells.forEach(header => {\n      if (header.sorting && !header.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.loading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\n      return;\n    }\n\n    const total = this.dataLength || this.tableRows.length;\n    const lastPage = Math.max(1, Math.ceil(total / this.itemsPerPage));\n    if (this.currentPage > lastPage) {\n      this.currentPage = lastPage;\n      return;\n    }\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));\n    this.tableRows.forEach(row => (row.style.display = visible.has(row) ? \"\" : \"none\"));\n  }\n\n  private _getSkeletonColumnCount(): { dataColumns: number; hasExpand: boolean; hasCheckbox: boolean } {\n    const headerColumnCount = this._headerCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return { dataColumns, hasExpand, hasCheckbox: this.multiSelect };\n  }\n\n  private _renderLoadingSkeleton() {\n    const { dataColumns, hasExpand, hasCheckbox } = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return Array.from(\n      { length: skeletonRows },\n      () =>\n        html`<div class=\"skeleton-row\" role=\"presentation\">\n          ${hasExpand\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"20px\"} .width=${\"20px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${hasCheckbox\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"24px\"} .width=${\"24px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${Array.from(\n            { length: dataColumns },\n            () =>\n              html`<div class=\"skeleton-cell\">\n                <sgds-skeleton .height=${\"100%\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n          )}\n        </div>`\n    );\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"loading\")) {\n      this._updateVisibleRows();\n    }\n    if (changed.has(\"multiSelect\")) {\n      this._configureRows();\n    }\n\n    if (this.multiSelect && (changed.has(\"tableRows\") || changed.has(\"headerRows\"))) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n  }\n\n  render() {\n    const total = this.dataLength || this.tableRows.length;\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const end = Math.min(start + this.itemsPerPage, total);\n    const displayStart = total === 0 ? 0 : start + 1;\n    const showNoData = !this.loading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <div class=\"table\" role=\"table\">\n            <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>\n            ${this.loading ? this._renderLoadingSkeleton() : nothing}\n          </div>\n          ${!this.loading && showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.loading\n                ? html`<span></span>`\n                : this.paginationSummary || html`<span>Showing ${displayStart} to ${end} of ${total} results</span>`}\n              <sgds-pagination\n                .dataLength=${total}\n                .currentPage=${this.currentPage}\n                .itemsPerPage=${this.itemsPerPage}\n                .variant=${this.paginationVariant}\n                size=\"sm\"\n                @sgds-page-change=${(e: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => {\n                  this.currentPage = e.detail.currentPage;\n                  this.emit(\"sgds-page-change\");\n                }}\n              ></sgds-pagination>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-data-table.cjs.js","names":["SgdsElement","tableStyle","SgdsPagination","SgdsDataTableCell","SgdsDataTableHead","SgdsSkeleton","SgdsDataTableRow","nothing","property","state"],"sources":["../../../../src/components/DataTable/sgds-data-table.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./data-table.css\";\nimport SgdsPagination from \"../Pagination/sgds-pagination\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"../Pagination/sgds-pagination\";\nimport SgdsDataTableRow from \"./sgds-data-table-row\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\nimport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail } from \"./types\";\nexport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail };\n\n/**\n * @summary A data table container with pagination, row selection, loading, and sorting support.\n *\n * @slot default - Insert one or more `sgds-data-table-row` elements.\n * @slot no-data - Custom content rendered when no body rows are available and `loading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: Record<string, string>[] }`.\n * @event sgds-sort - Emitted when `serverSort` is true and a sorting column header is clicked.\n * Detail: `{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }`.\n * @event sgds-page-change - Emitted when pagination changes page.\n */\nexport class SgdsDataTable extends SgdsElement {\n  static styles = [\n    ...SgdsElement.styles,\n    tableStyle,\n    css`\n      :host {\n        display: block;\n      }\n    `\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-pagination\": SgdsPagination,\n    \"sgds-data-table-cell\": SgdsDataTableCell,\n    \"sgds-data-table-head\": SgdsDataTableHead,\n    \"sgds-skeleton\": SgdsSkeleton\n  };\n\n  /** If true, renders a checkbox column for row selection. */\n  @property({ type: Boolean }) multiSelect = false;\n\n  /** Total number of data items (for server-side pagination). */\n  @property({ type: Number }) dataLength = 0;\n\n  /** Current page (1-based). */\n  @property({ type: Number }) currentPage = 1;\n\n  /** Number of rows per page. */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Custom text shown on the footer's left side. */\n  @property({ type: String }) paginationSummary = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) loading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Pagination mode. `client` (default) slices rows and renders pagination controls.\n   * `server` renders all slotted rows as-is — the caller is responsible for passing\n   * the correct page of data and handling `sgds-page-change` externally.\n   */\n  @property({ type: String }) mode: \"client\" | \"server\" = \"client\";\n\n  @state() private tableRows: SgdsDataTableRow[] = [];\n  @state() private headerRows: SgdsDataTableRow[] = [];\n\n  private _headerCells: SgdsDataTableHead[] = [];\n  private _initialRowPositions = new WeakMap<SgdsDataTableRow, number>();\n  private _hasCapturedInitialRowPositions = false;\n\n  private _rowHandlers = new WeakMap<SgdsDataTableRow, EventListener>();\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  private _isRowChecked(row: SgdsDataTableRow) {\n    return row.checked || row.checkbox?.checked === true;\n  }\n\n  private _updateHeaderCheckbox() {\n    const checkedCount = this.tableRows.filter(r => this._isRowChecked(r)).length;\n\n    const allChecked = checkedCount === this.tableRows.length && checkedCount > 0;\n\n    this.headerRows.forEach(r => {\n      r.checked = allChecked;\n      if (r.checkbox) {\n        r.checkbox.checked = allChecked;\n        r.checkbox.indeterminate = checkedCount > 0 && !allChecked;\n      }\n    });\n  }\n\n  private async _syncHeaderCheckboxAfterRender() {\n    if (!this.multiSelect || this.headerRows.length === 0) return;\n\n    const rows = [...this.headerRows, ...this.tableRows];\n    await Promise.all(rows.map(row => row.updateComplete));\n    this._updateHeaderCheckbox();\n  }\n\n  private _emitRowSelect() {\n    const selected = this.tableRows.filter(r => this._isRowChecked(r)).map(r => this._getRowData(r));\n    this.emit(\"sgds-row-select\", { detail: { selected } });\n  }\n\n  private _attachRowListener(row: SgdsDataTableRow) {\n    const old = this._rowHandlers.get(row);\n    if (old) row.removeEventListener(\"i-sgds-change\", old);\n\n    const handler: EventListener = (e: Event) => {\n      const { checked } = (e as CustomEvent<{ checked: boolean }>).detail;\n\n      if (this.headerRows.includes(row)) {\n        this.tableRows.forEach(r => {\n          r.checked = checked;\n          if (r.checkbox) r.checkbox.checked = checked;\n        });\n      } else {\n        row.checked = checked;\n        this._updateHeaderCheckbox();\n      }\n      this._emitRowSelect();\n    };\n\n    this._rowHandlers.set(row, handler);\n    row.addEventListener(\"i-sgds-change\", handler);\n  }\n\n  private _configureRows() {\n    const hasExpand = this.tableRows.some(r => r.expand);\n    const hasDataRows = this.tableRows.length > 0;\n\n    this.headerRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = hasExpand;\n      row.hasDataRows = hasDataRows;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    this.tableRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = !row.expand && hasExpand;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    if (this.multiSelect) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n\n    this._applyColumnAlignment();\n  }\n\n  private _applyColumnAlignment() {\n    const headerAlignments = this._headerCells.reduce<Array<\"left\" | \"right\">>((acc, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      const alignment = header.textAlign ?? \"left\";\n      for (let i = 0; i < span; i++) {\n        acc.push(alignment);\n      }\n      return acc;\n    }, []);\n\n    this.headerRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n\n    this.tableRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n  }\n\n  private _extractCellText(row: SgdsDataTableRow, columnIndex: number) {\n    const rowCellText = row.getCellText(columnIndex);\n    if (rowCellText) return rowCellText;\n\n    const cells = Array.from(row.children).filter(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    const cell = cells[columnIndex];\n    return (cell?.textContent || \"\").trim();\n  }\n\n  private _getRowData(row: SgdsDataTableRow): Record<string, string> {\n    const data: Record<string, string> = {};\n    this._headerCells.forEach((header, index) => {\n      const key = header.sortKey || (header.textContent ?? \"\").trim() || `col-${index}`;\n      data[key] = this._extractCellText(row, index);\n    });\n    return data;\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, _key: string, columnIndex: number) {\n    return this._extractCellText(row, columnIndex);\n  }\n\n  private _compareValues(left: unknown, right: unknown, direction: \"ascending\" | \"descending\") {\n    if (left === right) return 0;\n\n    const leftNumber = Number(left);\n    const rightNumber = Number(right);\n    const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);\n\n    if (bothNumeric) {\n      return direction === \"ascending\" ? leftNumber - rightNumber : rightNumber - leftNumber;\n    }\n\n    const cmp = String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: \"base\" });\n    return direction === \"ascending\" ? cmp : -cmp;\n  }\n\n  private _resetOtherHeaderSortStates(activeHeader: SgdsDataTableHead | null) {\n    this._headerCells.forEach(header => {\n      if (header !== activeHeader && header.sorting) {\n        header.sortDirection = \"none\";\n      }\n    });\n  }\n\n  private _getRowsInInitialPositionOrder(rows: SgdsDataTableRow[]) {\n    return [...rows].sort((left, right) => {\n      const leftPosition = this._initialRowPositions.get(left);\n      const rightPosition = this._initialRowPositions.get(right);\n\n      if (leftPosition === undefined && rightPosition === undefined) return 0;\n      if (leftPosition === undefined) return 1;\n      if (rightPosition === undefined) return -1;\n      return leftPosition - rightPosition;\n    });\n  }\n\n  private _captureInitialRowPositions(rows: SgdsDataTableRow[]) {\n    if (this._hasCapturedInitialRowPositions) return;\n\n    rows.forEach((row, index) => {\n      this._initialRowPositions.set(row, index);\n    });\n\n    this._hasCapturedInitialRowPositions = true;\n  }\n\n  private _handleSort(e: Event) {\n    const activeHeader = e.composedPath().find(node => node instanceof SgdsDataTableHead) as\n      | SgdsDataTableHead\n      | undefined;\n\n    if (!activeHeader || !activeHeader.sorting) return;\n\n    const { key, direction } = (e as CustomEvent<ISgdsDataTableSortEventDetail>).detail;\n    const columnIndex = activeHeader ? this._headerCells.indexOf(activeHeader) : -1;\n\n    this._resetOtherHeaderSortStates(activeHeader);\n\n    if (this.serverSort) {\n      e.stopPropagation();\n      this.emit(\"sgds-sort\", { detail: { key, direction } });\n      return;\n    }\n\n    if (columnIndex < 0) return;\n\n    if (direction === \"none\") {\n      this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);\n      if (this.mode === \"client\") this.currentPage = 1;\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    this.tableRows = [...this.tableRows].sort((left, right) => {\n      const leftValue = this._toComparableValue(left, key, columnIndex);\n      const rightValue = this._toComparableValue(right, key, columnIndex);\n      return this._compareValues(leftValue, rightValue, direction);\n    });\n\n    if (this.mode === \"client\") this.currentPage = 1;\n    this._syncDomRowOrder();\n    this._updateVisibleRows();\n  }\n\n  private _syncDomRowOrder() {\n    const parent = this.tableRows[0]?.parentElement;\n    if (!parent) return;\n    this.tableRows.forEach(row => parent.appendChild(row));\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slotted = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(el => el instanceof SgdsDataTableRow) as SgdsDataTableRow[];\n\n    const rowTableChildren = (row: SgdsDataTableRow) =>\n      Array.from(row.children).filter(child => {\n        const tagName = child.tagName.toLowerCase();\n        const isTableCell = tagName === \"sgds-data-table-cell\" || tagName === \"sgds-data-table-head\";\n        if (!isTableCell) return false;\n        return child.getAttribute(\"slot\") !== \"content\";\n      });\n\n    this.headerRows = slotted.filter(row =>\n      rowTableChildren(row).some(child => child.tagName.toLowerCase() === \"sgds-data-table-head\")\n    );\n\n    this.tableRows = slotted.filter(row => {\n      const children = rowTableChildren(row);\n      return children.length > 0 && children.every(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    });\n\n    this._headerCells = this.headerRows.reduce<SgdsDataTableHead[]>((acc, row) => {\n      const headers = Array.from(row.children).filter(\n        child => child instanceof SgdsDataTableHead\n      ) as SgdsDataTableHead[];\n      acc.push(...headers);\n      return acc;\n    }, []);\n\n    this._captureInitialRowPositions(this.tableRows);\n\n    this._headerCells.forEach(header => {\n      if (header.sorting && !header.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.loading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\n      return;\n    }\n\n    const total = this.dataLength || this.tableRows.length;\n    const lastPage = Math.max(1, Math.ceil(total / this.itemsPerPage));\n    if (this.currentPage > lastPage) {\n      this.currentPage = lastPage;\n      return;\n    }\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));\n    this.tableRows.forEach(row => (row.style.display = visible.has(row) ? \"\" : \"none\"));\n  }\n\n  private _getSkeletonColumnCount(): { dataColumns: number; hasExpand: boolean; hasCheckbox: boolean } {\n    const headerColumnCount = this._headerCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return { dataColumns, hasExpand, hasCheckbox: this.multiSelect };\n  }\n\n  private _renderLoadingSkeleton() {\n    const { dataColumns, hasExpand, hasCheckbox } = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return Array.from(\n      { length: skeletonRows },\n      () =>\n        html`<div class=\"skeleton-row\" role=\"presentation\">\n          ${hasExpand\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"20px\"} .width=${\"20px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${hasCheckbox\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"24px\"} .width=${\"24px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${Array.from(\n            { length: dataColumns },\n            () =>\n              html`<div class=\"skeleton-cell\">\n                <sgds-skeleton .height=${\"100%\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n          )}\n        </div>`\n    );\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"loading\")) {\n      this._updateVisibleRows();\n    }\n    if (changed.has(\"multiSelect\")) {\n      this._configureRows();\n    }\n\n    if (this.multiSelect && (changed.has(\"tableRows\") || changed.has(\"headerRows\"))) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n  }\n\n  render() {\n    const total = this.dataLength || this.tableRows.length;\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const end = Math.min(start + this.itemsPerPage, total);\n    const displayStart = total === 0 ? 0 : start + 1;\n    const showNoData = !this.loading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <div class=\"table\" role=\"table\">\n            <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>\n            ${this.loading ? this._renderLoadingSkeleton() : nothing}\n          </div>\n          ${!this.loading && showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.loading\n                ? html`<span></span>`\n                : this.paginationSummary || html`<span>Showing ${displayStart} to ${end} of ${total} results</span>`}\n              <sgds-pagination\n                .dataLength=${total}\n                .currentPage=${this.currentPage}\n                .itemsPerPage=${this.itemsPerPage}\n                .variant=${this.paginationVariant}\n                size=\"sm\"\n                @sgds-page-change=${(e: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => {\n                  this.currentPage = e.detail.currentPage;\n                  this.emit(\"sgds-page-change\");\n                }}\n              ></sgds-pagination>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,gBAAb,cAAmCA,qBAAAA,QAAY;;;EAoBF,KAAA,cAAA;EAGF,KAAA,aAAA;EAGC,KAAA,cAAA;EAGC,KAAA,eAAA;EAGK,KAAA,oBAAA;EAGT,KAAA,UAAA;EAGG,KAAA,aAAA;EAGuD,KAAA,oBAAA;EAQ3B,KAAA,SAAA;EAOd,KAAA,OAAA;EAEP,KAAA,YAAA,CAAC;EACA,KAAA,aAAA,CAAC;EAEP,KAAA,eAAA,CAAC;EACd,KAAA,uCAAA,IAAI,QAAkC;EAC3B,KAAA,kCAAA;EAEnB,KAAA,+BAAA,IAAI,QAAyC;;;EAhEpD,KAAA,SAAA;GACd,GAAGA,qBAAAA,QAAY;GACfC,mBAAAA;GACA,IAAA,GAAG;;;;;EAKL;;;EAGsB,KAAA,eAAA;GACpB,mBAAmBC,wBAAAA;GACnB,wBAAwBC,6BAAAA;GACxB,wBAAwBC,6BAAAA;GACxB,iBAAiBC,sBAAAA;EACnB;;CAkDA,oBAAoB;EAClB,MAAM,kBAAkB;CAC1B;CAEA,cAAsB,KAAuB;EAC3C,OAAO,IAAI,WAAW,IAAI,UAAU,YAAY;CAClD;CAEA,wBAAgC;EAC9B,MAAM,eAAe,KAAK,UAAU,QAAO,MAAK,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC;EAEvE,MAAM,aAAa,iBAAiB,KAAK,UAAU,UAAU,eAAe;EAE5E,KAAK,WAAW,SAAQ,MAAK;GAC3B,EAAE,UAAU;GACZ,IAAI,EAAE,UAAU;IACd,EAAE,SAAS,UAAU;IACrB,EAAE,SAAS,gBAAgB,eAAe,KAAK,CAAC;GAClD;EACF,CAAC;CACH;CAEA,MAAc,iCAAiC;EAC7C,IAAI,CAAC,KAAK,eAAe,KAAK,WAAW,WAAW,GAAG;EAEvD,MAAM,OAAO,CAAC,GAAG,KAAK,YAAY,GAAG,KAAK,SAAS;EACnD,MAAM,QAAQ,IAAI,KAAK,KAAI,QAAO,IAAI,cAAc,CAAC;EACrD,KAAK,sBAAsB;CAC7B;CAEA,iBAAyB;EACvB,MAAM,WAAW,KAAK,UAAU,QAAO,MAAK,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,KAAI,MAAK,KAAK,YAAY,CAAC,CAAC;EAC/F,KAAK,KAAK,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvD;CAEA,mBAA2B,KAAuB;EAChD,MAAM,MAAM,KAAK,aAAa,IAAI,GAAG;EACrC,IAAI,KAAK,IAAI,oBAAoB,iBAAiB,GAAG;EAErD,MAAM,WAA0B,MAAa;GAC3C,MAAM,EAAE,YAAa,EAAwC;GAE7D,IAAI,KAAK,WAAW,SAAS,GAAG,GAC9B,KAAK,UAAU,SAAQ,MAAK;IAC1B,EAAE,UAAU;IACZ,IAAI,EAAE,UAAU,EAAE,SAAS,UAAU;GACvC,CAAC;QACI;IACL,IAAI,UAAU;IACd,KAAK,sBAAsB;GAC7B;GACA,KAAK,eAAe;EACtB;EAEA,KAAK,aAAa,IAAI,KAAK,OAAO;EAClC,IAAI,iBAAiB,iBAAiB,OAAO;CAC/C;CAEA,iBAAyB;EACvB,MAAM,YAAY,KAAK,UAAU,MAAK,MAAK,EAAE,MAAM;EACnD,MAAM,cAAc,KAAK,UAAU,SAAS;EAE5C,KAAK,WAAW,SAAQ,QAAO;GAC7B,IAAI,eAAe,KAAK;GACxB,IAAI,wBAAwB;GAC5B,IAAI,cAAc;GAClB,IAAI,KAAK,aAAa,KAAK,mBAAmB,GAAG;EACnD,CAAC;EAED,KAAK,UAAU,SAAQ,QAAO;GAC5B,IAAI,eAAe,KAAK;GACxB,IAAI,wBAAwB,CAAC,IAAI,UAAU;GAC3C,IAAI,KAAK,aAAa,KAAK,mBAAmB,GAAG;EACnD,CAAC;EAED,IAAI,KAAK,aACP,KAAK,+BAA+B;EAGtC,KAAK,sBAAsB;CAC7B;CAEA,wBAAgC;EAC9B,MAAM,mBAAmB,KAAK,aAAa,QAAiC,KAAK,WAAW;GAC1F,MAAM,OAAO,OAAO,OAAO,OAAO,IAAI,IAAI,OAAO,OAAO,OAAO,IAAI;GACnE,MAAM,YAAY,OAAO,aAAa;GACtC,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,KACxB,IAAI,KAAK,SAAS;GAEpB,OAAO;EACT,GAAG,CAAC,CAAC;EAEL,KAAK,WAAW,SAAQ,QAAO;GAC7B,IAAI,mBAAmB,CAAC,GAAG,gBAAgB;EAC7C,CAAC;EAED,KAAK,UAAU,SAAQ,QAAO;GAC5B,IAAI,mBAAmB,CAAC,GAAG,gBAAgB;EAC7C,CAAC;CACH;CAEA,iBAAyB,KAAuB,aAAqB;EACnE,MAAM,cAAc,IAAI,YAAY,WAAW;EAC/C,IAAI,aAAa,OAAO;EAIxB,QAFc,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QAAO,UAAS,MAAM,QAAQ,YAAY,MAAM,sBACtE,CAAC,CAAC,YACP,EAAE,eAAe,GAAA,CAAI,KAAK;CACxC;CAEA,YAAoB,KAA+C;EACjE,MAAM,OAA+B,CAAC;EACtC,KAAK,aAAa,SAAS,QAAQ,UAAU;GAC3C,MAAM,MAAM,OAAO,YAAY,OAAO,eAAe,GAAA,CAAI,KAAK,KAAK,OAAO;GAC1E,KAAK,OAAO,KAAK,iBAAiB,KAAK,KAAK;EAC9C,CAAC;EACD,OAAO;CACT;CAEA,mBAA2B,KAAuB,MAAc,aAAqB;EACnF,OAAO,KAAK,iBAAiB,KAAK,WAAW;CAC/C;CAEA,eAAuB,MAAe,OAAgB,WAAuC;EAC3F,IAAI,SAAS,OAAO,OAAO;EAE3B,MAAM,aAAa,OAAO,IAAI;EAC9B,MAAM,cAAc,OAAO,KAAK;EAGhC,IAFoB,OAAO,SAAS,UAAU,KAAK,OAAO,SAAS,WAAW,GAG5E,OAAO,cAAc,cAAc,aAAa,cAAc,cAAc;EAG9E,MAAM,MAAM,OAAO,IAAI,CAAC,CAAC,cAAc,OAAO,KAAK,GAAG,KAAA,GAAW;GAAE,SAAS;GAAM,aAAa;EAAO,CAAC;EACvG,OAAO,cAAc,cAAc,MAAM,CAAC;CAC5C;CAEA,4BAAoC,cAAwC;EAC1E,KAAK,aAAa,SAAQ,WAAU;GAClC,IAAI,WAAW,gBAAgB,OAAO,SACpC,OAAO,gBAAgB;EAE3B,CAAC;CACH;CAEA,+BAAuC,MAA0B;EAC/D,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,MAAM,UAAU;GACrC,MAAM,eAAe,KAAK,qBAAqB,IAAI,IAAI;GACvD,MAAM,gBAAgB,KAAK,qBAAqB,IAAI,KAAK;GAEzD,IAAI,iBAAiB,KAAA,KAAa,kBAAkB,KAAA,GAAW,OAAO;GACtE,IAAI,iBAAiB,KAAA,GAAW,OAAO;GACvC,IAAI,kBAAkB,KAAA,GAAW,OAAO;GACxC,OAAO,eAAe;EACxB,CAAC;CACH;CAEA,4BAAoC,MAA0B;EAC5D,IAAI,KAAK,iCAAiC;EAE1C,KAAK,SAAS,KAAK,UAAU;GAC3B,KAAK,qBAAqB,IAAI,KAAK,KAAK;EAC1C,CAAC;EAED,KAAK,kCAAkC;CACzC;CAEA,YAAoB,GAAU;EAC5B,MAAM,eAAe,EAAE,aAAa,CAAC,CAAC,MAAK,SAAQ,gBAAgBD,6BAAAA,iBAAiB;EAIpF,IAAI,CAAC,gBAAgB,CAAC,aAAa,SAAS;EAE5C,MAAM,EAAE,KAAK,cAAe,EAAiD;EAC7E,MAAM,cAAc,eAAe,KAAK,aAAa,QAAQ,YAAY,IAAI;EAE7E,KAAK,4BAA4B,YAAY;EAE7C,IAAI,KAAK,YAAY;GACnB,EAAE,gBAAgB;GAClB,KAAK,KAAK,aAAa,EAAE,QAAQ;IAAE;IAAK;GAAU,EAAE,CAAC;GACrD;EACF;EAEA,IAAI,cAAc,GAAG;EAErB,IAAI,cAAc,QAAQ;GACxB,KAAK,YAAY,KAAK,+BAA+B,KAAK,SAAS;GACnE,IAAI,KAAK,SAAS,UAAU,KAAK,cAAc;GAC/C,KAAK,iBAAiB;GACtB,KAAK,mBAAmB;GACxB;EACF;EAEA,KAAK,YAAY,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,MAAM,MAAM,UAAU;GACzD,MAAM,YAAY,KAAK,mBAAmB,MAAM,KAAK,WAAW;GAChE,MAAM,aAAa,KAAK,mBAAmB,OAAO,KAAK,WAAW;GAClE,OAAO,KAAK,eAAe,WAAW,YAAY,SAAS;EAC7D,CAAC;EAED,IAAI,KAAK,SAAS,UAAU,KAAK,cAAc;EAC/C,KAAK,iBAAiB;EACtB,KAAK,mBAAmB;CAC1B;CAEA,mBAA2B;EACzB,MAAM,SAAS,KAAK,UAAU,EAAE,EAAE;EAClC,IAAI,CAAC,QAAQ;EACb,KAAK,UAAU,SAAQ,QAAO,OAAO,YAAY,GAAG,CAAC;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,UAAW,EAAE,OAChB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QAAO,OAAM,cAAcE,4BAAAA,gBAAgB;EAE9C,MAAM,oBAAoB,QACxB,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QAAO,UAAS;GACvC,MAAM,UAAU,MAAM,QAAQ,YAAY;GAE1C,IAAI,EADgB,YAAY,0BAA0B,YAAY,yBACpD,OAAO;GACzB,OAAO,MAAM,aAAa,MAAM,MAAM;EACxC,CAAC;EAEH,KAAK,aAAa,QAAQ,QAAO,QAC/B,iBAAiB,GAAG,CAAC,CAAC,MAAK,UAAS,MAAM,QAAQ,YAAY,MAAM,sBAAsB,CAC5F;EAEA,KAAK,YAAY,QAAQ,QAAO,QAAO;GACrC,MAAM,WAAW,iBAAiB,GAAG;GACrC,OAAO,SAAS,SAAS,KAAK,SAAS,OAAM,UAAS,MAAM,QAAQ,YAAY,MAAM,sBAAsB;EAC9G,CAAC;EAED,KAAK,eAAe,KAAK,WAAW,QAA6B,KAAK,QAAQ;GAC5E,MAAM,UAAU,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QACvC,UAAS,iBAAiBF,6BAAAA,iBAC5B;GACA,IAAI,KAAK,GAAG,OAAO;GACnB,OAAO;EACT,GAAG,CAAC,CAAC;EAEL,KAAK,4BAA4B,KAAK,SAAS;EAE/C,KAAK,aAAa,SAAQ,WAAU;GAClC,IAAI,OAAO,WAAW,CAAC,OAAO,eAC5B,OAAO,gBAAgB;EAE3B,CAAC;EAED,KAAK,eAAe;EACpB,KAAK,mBAAmB;CAC1B;CAEA,qBAA6B;EAC3B,IAAI,KAAK,SAAS;GAChB,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,MAAO;GAC1D;EACF;EAEA,IAAI,KAAK,SAAS,UAAU;GAC1B,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,EAAG;GACtD;EACF;EAEA,MAAM,QAAQ,KAAK,cAAc,KAAK,UAAU;EAChD,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,KAAK,YAAY,CAAC;EACjE,IAAI,KAAK,cAAc,UAAU;GAC/B,KAAK,cAAc;GACnB;EACF;EACA,MAAM,SAAS,KAAK,cAAc,KAAK,KAAK;EAC5C,MAAM,UAAU,IAAI,IAAI,KAAK,UAAU,MAAM,OAAO,QAAQ,KAAK,YAAY,CAAC;EAC9E,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,QAAQ,IAAI,GAAG,IAAI,KAAK,MAAO;CACpF;CAEA,0BAAqG;EACnG,MAAM,oBAAoB,KAAK,aAAa,QAAQ,OAAO,WAAW;GAEpE,OAAO,SADM,OAAO,OAAO,OAAO,IAAI,IAAI,OAAO,OAAO,OAAO,IAAI;EAErE,GAAG,CAAC;EAEJ,MAAM,eAAe,KAAK,UAAU;EACpC,MAAM,0BAA0B,eAC5B,MAAM,KAAK,aAAa,QAAQ,CAAC,CAAC,QAAO,UAAS,iBAAiBD,6BAAAA,iBAAiB,CAAC,CAAC,SACtF;EAEJ,MAAM,YAAY,KAAK,UAAU,MAAK,QAAO,IAAI,MAAM;EAGvD,OAAO;GAAE,aAFW,qBAAqB,2BAA2B;GAE9C;GAAW,aAAa,KAAK;EAAY;CACjE;CAEA,yBAAiC;EAC/B,MAAM,EAAE,aAAa,WAAW,gBAAgB,KAAK,wBAAwB;EAC7E,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,gBAAgB,CAAC;EAEvD,OAAO,MAAM,KACX,EAAE,QAAQ,aAAa,SAErB,IAAA,IAAI;YACA,YACE,IAAA,IAAI;yCACuB,OAAO,UAAU,OAAO,iBAAiB,MAAM;wBAE1EI,IAAAA,QAAQ;YACV,cACE,IAAA,IAAI;yCACuB,OAAO,UAAU,OAAO,iBAAiB,MAAM;wBAE1EA,IAAAA,QAAQ;YACV,MAAM,KACN,EAAE,QAAQ,YAAY,SAEpB,IAAA,IAAI;yCACuB,OAAO,iBAAiB,MAAM;qBAE7D,EAAE;eAER;CACF;CAEA,QAAQ,SAA+B;EACrC,IAAI,QAAQ,IAAI,aAAa,KAAK,QAAQ,IAAI,cAAc,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ,IAAI,SAAS,GAC3G,KAAK,mBAAmB;EAE1B,IAAI,QAAQ,IAAI,aAAa,GAC3B,KAAK,eAAe;EAGtB,IAAI,KAAK,gBAAgB,QAAQ,IAAI,WAAW,KAAK,QAAQ,IAAI,YAAY,IAC3E,KAAK,+BAA+B;CAExC;CAEA,SAAS;EACP,MAAM,QAAQ,KAAK,cAAc,KAAK,UAAU;EAChD,MAAM,SAAS,KAAK,cAAc,KAAK,KAAK;EAC5C,MAAM,MAAM,KAAK,IAAI,QAAQ,KAAK,cAAc,KAAK;EACrD,MAAM,eAAe,UAAU,IAAI,IAAI,QAAQ;EAC/C,MAAM,aAAa,CAAC,KAAK,WAAW,KAAK,UAAU,WAAW;EAC9D,MAAM,aAAa,UAAU;EAE7B,OAAO,IAAA,IAAI;;;;gCAIiB,KAAK,kBAAkB,gBAAgB,KAAK,YAAY;cAC1E,KAAK,UAAU,KAAK,uBAAuB,IAAIA,IAAAA,QAAQ;;YAEzD,CAAC,KAAK,WAAW,aACf,IAAA,IAAI,yFACJA,IAAAA,QAAQ;;;UAGZ,aACE,IAAA,IAAI;gBACA,KAAK,UACH,IAAA,IAAI,kBACJ,KAAK,qBAAqB,IAAA,IAAI,iBAAiB,aAAa,MAAM,IAAI,MAAM,MAAM,iBAAiB;;8BAEvF,MAAM;+BACL,KAAK,YAAY;gCAChB,KAAK,aAAa;2BACvB,KAAK,kBAAkB;;qCAEb,MAAyD;GAC5E,KAAK,cAAc,EAAE,OAAO;GAC5B,KAAK,KAAK,kBAAkB;EAC9B,EAAE;;sBAGNA,IAAAA,QAAQ;;;CAGlB;AACF;AAxaGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,gBAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,qBAAA,KAAA,CAAA;AAGzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,WAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA;AAG1BA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,qBAAA,KAAA,CAAA;AAQzBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,UAAA,KAAA,CAAA;AAOxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA;AAEzBC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;AACNA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA"}

package/react/components/DataTable/sgds-data-table.js

@@ -202,21 +202,7 @@ var SgdsDataTable = class extends SgdsElement {
 		if (columnIndex < 0) return;
 		if (direction === "none") {
 			this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);
-			this._syncDomRowOrder();
-			this._updateVisibleRows();
-			return;
-		}
-		if (this.mode === "client") {
-			const start = (this.currentPage - 1) * this.itemsPerPage;
-			const end = start + this.itemsPerPage;
-			const nextRows = [...this.tableRows];
-			const sortedVisibleRows = nextRows.slice(start, end).sort((left, right) => {
-				const leftValue = this._toComparableValue(left, key, columnIndex);
-				const rightValue = this._toComparableValue(right, key, columnIndex);
-				return this._compareValues(leftValue, rightValue, direction);
-			});
-			nextRows.splice(start, sortedVisibleRows.length, ...sortedVisibleRows);
-			this.tableRows = nextRows;
+			if (this.mode === "client") this.currentPage = 1;
 			this._syncDomRowOrder();
 			this._updateVisibleRows();
 			return;
@@ -226,6 +212,7 @@ var SgdsDataTable = class extends SgdsElement {
 			const rightValue = this._toComparableValue(right, key, columnIndex);
 			return this._compareValues(leftValue, rightValue, direction);
 		});
+		if (this.mode === "client") this.currentPage = 1;
 		this._syncDomRowOrder();
 		this._updateVisibleRows();
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-data-table.js","names":["tableStyle"],"sources":["../../../../src/components/DataTable/sgds-data-table.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./data-table.css\";\nimport SgdsPagination from \"../Pagination/sgds-pagination\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"../Pagination/sgds-pagination\";\nimport SgdsDataTableRow from \"./sgds-data-table-row\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\nimport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail } from \"./types\";\nexport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail };\n\n/**\n * @summary A data table container with pagination, row selection, loading, and sorting support.\n *\n * @slot default - Insert one or more `sgds-data-table-row` elements.\n * @slot no-data - Custom content rendered when no body rows are available and `loading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: Record<string, string>[] }`.\n * @event sgds-sort - Emitted when `serverSort` is true and a sorting column header is clicked.\n * Detail: `{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }`.\n * @event sgds-page-change - Emitted when pagination changes page.\n */\nexport class SgdsDataTable extends SgdsElement {\n  static styles = [\n    ...SgdsElement.styles,\n    tableStyle,\n    css`\n      :host {\n        display: block;\n      }\n    `\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-pagination\": SgdsPagination,\n    \"sgds-data-table-cell\": SgdsDataTableCell,\n    \"sgds-data-table-head\": SgdsDataTableHead,\n    \"sgds-skeleton\": SgdsSkeleton\n  };\n\n  /** If true, renders a checkbox column for row selection. */\n  @property({ type: Boolean }) multiSelect = false;\n\n  /** Total number of data items (for server-side pagination). */\n  @property({ type: Number }) dataLength = 0;\n\n  /** Current page (1-based). */\n  @property({ type: Number }) currentPage = 1;\n\n  /** Number of rows per page. */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Custom text shown on the footer's left side. */\n  @property({ type: String }) paginationSummary = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) loading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Pagination mode. `client` (default) slices rows and renders pagination controls.\n   * `server` renders all slotted rows as-is — the caller is responsible for passing\n   * the correct page of data and handling `sgds-page-change` externally.\n   */\n  @property({ type: String }) mode: \"client\" | \"server\" = \"client\";\n\n  @state() private tableRows: SgdsDataTableRow[] = [];\n  @state() private headerRows: SgdsDataTableRow[] = [];\n\n  private _headerCells: SgdsDataTableHead[] = [];\n  private _initialRowPositions = new WeakMap<SgdsDataTableRow, number>();\n  private _hasCapturedInitialRowPositions = false;\n\n  private _rowHandlers = new WeakMap<SgdsDataTableRow, EventListener>();\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  private _isRowChecked(row: SgdsDataTableRow) {\n    return row.checked || row.checkbox?.checked === true;\n  }\n\n  private _updateHeaderCheckbox() {\n    const checkedCount = this.tableRows.filter(r => this._isRowChecked(r)).length;\n\n    const allChecked = checkedCount === this.tableRows.length && checkedCount > 0;\n\n    this.headerRows.forEach(r => {\n      r.checked = allChecked;\n      if (r.checkbox) {\n        r.checkbox.checked = allChecked;\n        r.checkbox.indeterminate = checkedCount > 0 && !allChecked;\n      }\n    });\n  }\n\n  private async _syncHeaderCheckboxAfterRender() {\n    if (!this.multiSelect || this.headerRows.length === 0) return;\n\n    const rows = [...this.headerRows, ...this.tableRows];\n    await Promise.all(rows.map(row => row.updateComplete));\n    this._updateHeaderCheckbox();\n  }\n\n  private _emitRowSelect() {\n    const selected = this.tableRows.filter(r => this._isRowChecked(r)).map(r => this._getRowData(r));\n    this.emit(\"sgds-row-select\", { detail: { selected } });\n  }\n\n  private _attachRowListener(row: SgdsDataTableRow) {\n    const old = this._rowHandlers.get(row);\n    if (old) row.removeEventListener(\"i-sgds-change\", old);\n\n    const handler: EventListener = (e: Event) => {\n      const { checked } = (e as CustomEvent<{ checked: boolean }>).detail;\n\n      if (this.headerRows.includes(row)) {\n        this.tableRows.forEach(r => {\n          r.checked = checked;\n          if (r.checkbox) r.checkbox.checked = checked;\n        });\n      } else {\n        row.checked = checked;\n        this._updateHeaderCheckbox();\n      }\n      this._emitRowSelect();\n    };\n\n    this._rowHandlers.set(row, handler);\n    row.addEventListener(\"i-sgds-change\", handler);\n  }\n\n  private _configureRows() {\n    const hasExpand = this.tableRows.some(r => r.expand);\n    const hasDataRows = this.tableRows.length > 0;\n\n    this.headerRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = hasExpand;\n      row.hasDataRows = hasDataRows;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    this.tableRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = !row.expand && hasExpand;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    if (this.multiSelect) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n\n    this._applyColumnAlignment();\n  }\n\n  private _applyColumnAlignment() {\n    const headerAlignments = this._headerCells.reduce<Array<\"left\" | \"right\">>((acc, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      const alignment = header.textAlign ?? \"left\";\n      for (let i = 0; i < span; i++) {\n        acc.push(alignment);\n      }\n      return acc;\n    }, []);\n\n    this.headerRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n\n    this.tableRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n  }\n\n  private _extractCellText(row: SgdsDataTableRow, columnIndex: number) {\n    const rowCellText = row.getCellText(columnIndex);\n    if (rowCellText) return rowCellText;\n\n    const cells = Array.from(row.children).filter(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    const cell = cells[columnIndex];\n    return (cell?.textContent || \"\").trim();\n  }\n\n  private _getRowData(row: SgdsDataTableRow): Record<string, string> {\n    const data: Record<string, string> = {};\n    this._headerCells.forEach((header, index) => {\n      const key = header.sortKey || (header.textContent ?? \"\").trim() || `col-${index}`;\n      data[key] = this._extractCellText(row, index);\n    });\n    return data;\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, _key: string, columnIndex: number) {\n    return this._extractCellText(row, columnIndex);\n  }\n\n  private _compareValues(left: unknown, right: unknown, direction: \"ascending\" | \"descending\") {\n    if (left === right) return 0;\n\n    const leftNumber = Number(left);\n    const rightNumber = Number(right);\n    const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);\n\n    if (bothNumeric) {\n      return direction === \"ascending\" ? leftNumber - rightNumber : rightNumber - leftNumber;\n    }\n\n    const cmp = String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: \"base\" });\n    return direction === \"ascending\" ? cmp : -cmp;\n  }\n\n  private _resetOtherHeaderSortStates(activeHeader: SgdsDataTableHead | null) {\n    this._headerCells.forEach(header => {\n      if (header !== activeHeader && header.sorting) {\n        header.sortDirection = \"none\";\n      }\n    });\n  }\n\n  private _getRowsInInitialPositionOrder(rows: SgdsDataTableRow[]) {\n    return [...rows].sort((left, right) => {\n      const leftPosition = this._initialRowPositions.get(left);\n      const rightPosition = this._initialRowPositions.get(right);\n\n      if (leftPosition === undefined && rightPosition === undefined) return 0;\n      if (leftPosition === undefined) return 1;\n      if (rightPosition === undefined) return -1;\n      return leftPosition - rightPosition;\n    });\n  }\n\n  private _captureInitialRowPositions(rows: SgdsDataTableRow[]) {\n    if (this._hasCapturedInitialRowPositions) return;\n\n    rows.forEach((row, index) => {\n      this._initialRowPositions.set(row, index);\n    });\n\n    this._hasCapturedInitialRowPositions = true;\n  }\n\n  private _handleSort(e: Event) {\n    const activeHeader = e.composedPath().find(node => node instanceof SgdsDataTableHead) as\n      | SgdsDataTableHead\n      | undefined;\n\n    if (!activeHeader || !activeHeader.sorting) return;\n\n    const { key, direction } = (e as CustomEvent<ISgdsDataTableSortEventDetail>).detail;\n    const columnIndex = activeHeader ? this._headerCells.indexOf(activeHeader) : -1;\n\n    this._resetOtherHeaderSortStates(activeHeader);\n\n    if (this.serverSort) {\n      e.stopPropagation();\n      this.emit(\"sgds-sort\", { detail: { key, direction } });\n      return;\n    }\n\n    if (columnIndex < 0) return;\n\n    if (direction === \"none\") {\n      this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    if (this.mode === \"client\") {\n      const start = (this.currentPage - 1) * this.itemsPerPage;\n      const end = start + this.itemsPerPage;\n      const nextRows = [...this.tableRows];\n\n      const sortedVisibleRows = nextRows.slice(start, end).sort((left, right) => {\n        const leftValue = this._toComparableValue(left, key, columnIndex);\n        const rightValue = this._toComparableValue(right, key, columnIndex);\n        return this._compareValues(leftValue, rightValue, direction);\n      });\n      nextRows.splice(start, sortedVisibleRows.length, ...sortedVisibleRows);\n\n      this.tableRows = nextRows;\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    this.tableRows = [...this.tableRows].sort((left, right) => {\n      const leftValue = this._toComparableValue(left, key, columnIndex);\n      const rightValue = this._toComparableValue(right, key, columnIndex);\n      return this._compareValues(leftValue, rightValue, direction);\n    });\n\n    this._syncDomRowOrder();\n    this._updateVisibleRows();\n  }\n\n  private _syncDomRowOrder() {\n    const parent = this.tableRows[0]?.parentElement;\n    if (!parent) return;\n    this.tableRows.forEach(row => parent.appendChild(row));\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slotted = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(el => el instanceof SgdsDataTableRow) as SgdsDataTableRow[];\n\n    const rowTableChildren = (row: SgdsDataTableRow) =>\n      Array.from(row.children).filter(child => {\n        const tagName = child.tagName.toLowerCase();\n        const isTableCell = tagName === \"sgds-data-table-cell\" || tagName === \"sgds-data-table-head\";\n        if (!isTableCell) return false;\n        return child.getAttribute(\"slot\") !== \"content\";\n      });\n\n    this.headerRows = slotted.filter(row =>\n      rowTableChildren(row).some(child => child.tagName.toLowerCase() === \"sgds-data-table-head\")\n    );\n\n    this.tableRows = slotted.filter(row => {\n      const children = rowTableChildren(row);\n      return children.length > 0 && children.every(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    });\n\n    this._headerCells = this.headerRows.reduce<SgdsDataTableHead[]>((acc, row) => {\n      const headers = Array.from(row.children).filter(\n        child => child instanceof SgdsDataTableHead\n      ) as SgdsDataTableHead[];\n      acc.push(...headers);\n      return acc;\n    }, []);\n\n    this._captureInitialRowPositions(this.tableRows);\n\n    this._headerCells.forEach(header => {\n      if (header.sorting && !header.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.loading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\n      return;\n    }\n\n    const total = this.dataLength || this.tableRows.length;\n    const lastPage = Math.max(1, Math.ceil(total / this.itemsPerPage));\n    if (this.currentPage > lastPage) {\n      this.currentPage = lastPage;\n      return;\n    }\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));\n    this.tableRows.forEach(row => (row.style.display = visible.has(row) ? \"\" : \"none\"));\n  }\n\n  private _getSkeletonColumnCount(): { dataColumns: number; hasExpand: boolean; hasCheckbox: boolean } {\n    const headerColumnCount = this._headerCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return { dataColumns, hasExpand, hasCheckbox: this.multiSelect };\n  }\n\n  private _renderLoadingSkeleton() {\n    const { dataColumns, hasExpand, hasCheckbox } = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return Array.from(\n      { length: skeletonRows },\n      () =>\n        html`<div class=\"skeleton-row\" role=\"presentation\">\n          ${hasExpand\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"20px\"} .width=${\"20px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${hasCheckbox\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"24px\"} .width=${\"24px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${Array.from(\n            { length: dataColumns },\n            () =>\n              html`<div class=\"skeleton-cell\">\n                <sgds-skeleton .height=${\"100%\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n          )}\n        </div>`\n    );\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"loading\")) {\n      this._updateVisibleRows();\n    }\n    if (changed.has(\"multiSelect\")) {\n      this._configureRows();\n    }\n\n    if (this.multiSelect && (changed.has(\"tableRows\") || changed.has(\"headerRows\"))) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n  }\n\n  render() {\n    const total = this.dataLength || this.tableRows.length;\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const end = Math.min(start + this.itemsPerPage, total);\n    const displayStart = total === 0 ? 0 : start + 1;\n    const showNoData = !this.loading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <div class=\"table\" role=\"table\">\n            <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>\n            ${this.loading ? this._renderLoadingSkeleton() : nothing}\n          </div>\n          ${!this.loading && showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.loading\n                ? html`<span></span>`\n                : this.paginationSummary || html`<span>Showing ${displayStart} to ${end} of ${total} results</span>`}\n              <sgds-pagination\n                .dataLength=${total}\n                .currentPage=${this.currentPage}\n                .itemsPerPage=${this.itemsPerPage}\n                .variant=${this.paginationVariant}\n                size=\"sm\"\n                @sgds-page-change=${(e: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => {\n                  this.currentPage = e.detail.currentPage;\n                  this.emit(\"sgds-page-change\");\n                }}\n              ></sgds-pagination>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-data-table.js","names":["tableStyle"],"sources":["../../../../src/components/DataTable/sgds-data-table.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableStyle from \"./data-table.css\";\nimport SgdsPagination from \"../Pagination/sgds-pagination\";\nimport type { ISgdsPaginationPageChangeEventDetail } from \"../Pagination/sgds-pagination\";\nimport SgdsDataTableRow from \"./sgds-data-table-row\";\nimport SgdsDataTableCell from \"./sgds-data-table-cell\";\nimport SgdsDataTableHead from \"./sgds-data-table-head\";\nimport SgdsSkeleton from \"../Skeleton/sgds-skeleton\";\nimport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail } from \"./types\";\nexport type { ISgdsDataTableRowSelectEventDetail, ISgdsDataTableSortEventDetail };\n\n/**\n * @summary A data table container with pagination, row selection, loading, and sorting support.\n *\n * @slot default - Insert one or more `sgds-data-table-row` elements.\n * @slot no-data - Custom content rendered when no body rows are available and `loading` is false.\n *\n * @event sgds-row-select - Emitted when row checkboxes change. Detail: `{ selected: Record<string, string>[] }`.\n * @event sgds-sort - Emitted when `serverSort` is true and a sorting column header is clicked.\n * Detail: `{ key: string; direction: \"ascending\" | \"descending\" | \"none\" }`.\n * @event sgds-page-change - Emitted when pagination changes page.\n */\nexport class SgdsDataTable extends SgdsElement {\n  static styles = [\n    ...SgdsElement.styles,\n    tableStyle,\n    css`\n      :host {\n        display: block;\n      }\n    `\n  ];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-pagination\": SgdsPagination,\n    \"sgds-data-table-cell\": SgdsDataTableCell,\n    \"sgds-data-table-head\": SgdsDataTableHead,\n    \"sgds-skeleton\": SgdsSkeleton\n  };\n\n  /** If true, renders a checkbox column for row selection. */\n  @property({ type: Boolean }) multiSelect = false;\n\n  /** Total number of data items (for server-side pagination). */\n  @property({ type: Number }) dataLength = 0;\n\n  /** Current page (1-based). */\n  @property({ type: Number }) currentPage = 1;\n\n  /** Number of rows per page. */\n  @property({ type: Number }) itemsPerPage = 5;\n\n  /** Custom text shown on the footer's left side. */\n  @property({ type: String }) paginationSummary = \"\";\n\n  /** When true, shows a loading state and hides body rows. */\n  @property({ type: Boolean }) loading = false;\n\n  /** When true, emits sort events for external handling instead of local sorting. */\n  @property({ type: Boolean }) serverSort = false;\n\n  /** Variant forwarded to the internal pagination component. */\n  @property({ type: String }) paginationVariant: \"default\" | \"number\" | \"button\" | \"description\" = \"default\";\n\n  /**\n   * Controls the CSS `table-layout` algorithm.\n   * Use \"auto\" to let the browser size columns based on content, or \"fixed\" to distribute column widths evenly regardless of content.\n   * @type {\"auto\" | \"fixed\"}\n   * @default \"auto\"\n   */\n  @property({ type: String, reflect: true }) layout: \"auto\" | \"fixed\" = \"auto\";\n\n  /**\n   * Pagination mode. `client` (default) slices rows and renders pagination controls.\n   * `server` renders all slotted rows as-is — the caller is responsible for passing\n   * the correct page of data and handling `sgds-page-change` externally.\n   */\n  @property({ type: String }) mode: \"client\" | \"server\" = \"client\";\n\n  @state() private tableRows: SgdsDataTableRow[] = [];\n  @state() private headerRows: SgdsDataTableRow[] = [];\n\n  private _headerCells: SgdsDataTableHead[] = [];\n  private _initialRowPositions = new WeakMap<SgdsDataTableRow, number>();\n  private _hasCapturedInitialRowPositions = false;\n\n  private _rowHandlers = new WeakMap<SgdsDataTableRow, EventListener>();\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  private _isRowChecked(row: SgdsDataTableRow) {\n    return row.checked || row.checkbox?.checked === true;\n  }\n\n  private _updateHeaderCheckbox() {\n    const checkedCount = this.tableRows.filter(r => this._isRowChecked(r)).length;\n\n    const allChecked = checkedCount === this.tableRows.length && checkedCount > 0;\n\n    this.headerRows.forEach(r => {\n      r.checked = allChecked;\n      if (r.checkbox) {\n        r.checkbox.checked = allChecked;\n        r.checkbox.indeterminate = checkedCount > 0 && !allChecked;\n      }\n    });\n  }\n\n  private async _syncHeaderCheckboxAfterRender() {\n    if (!this.multiSelect || this.headerRows.length === 0) return;\n\n    const rows = [...this.headerRows, ...this.tableRows];\n    await Promise.all(rows.map(row => row.updateComplete));\n    this._updateHeaderCheckbox();\n  }\n\n  private _emitRowSelect() {\n    const selected = this.tableRows.filter(r => this._isRowChecked(r)).map(r => this._getRowData(r));\n    this.emit(\"sgds-row-select\", { detail: { selected } });\n  }\n\n  private _attachRowListener(row: SgdsDataTableRow) {\n    const old = this._rowHandlers.get(row);\n    if (old) row.removeEventListener(\"i-sgds-change\", old);\n\n    const handler: EventListener = (e: Event) => {\n      const { checked } = (e as CustomEvent<{ checked: boolean }>).detail;\n\n      if (this.headerRows.includes(row)) {\n        this.tableRows.forEach(r => {\n          r.checked = checked;\n          if (r.checkbox) r.checkbox.checked = checked;\n        });\n      } else {\n        row.checked = checked;\n        this._updateHeaderCheckbox();\n      }\n      this._emitRowSelect();\n    };\n\n    this._rowHandlers.set(row, handler);\n    row.addEventListener(\"i-sgds-change\", handler);\n  }\n\n  private _configureRows() {\n    const hasExpand = this.tableRows.some(r => r.expand);\n    const hasDataRows = this.tableRows.length > 0;\n\n    this.headerRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = hasExpand;\n      row.hasDataRows = hasDataRows;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    this.tableRows.forEach(row => {\n      row.showCheckbox = this.multiSelect;\n      row.showExpandPlaceholder = !row.expand && hasExpand;\n      if (this.multiSelect) this._attachRowListener(row);\n    });\n\n    if (this.multiSelect) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n\n    this._applyColumnAlignment();\n  }\n\n  private _applyColumnAlignment() {\n    const headerAlignments = this._headerCells.reduce<Array<\"left\" | \"right\">>((acc, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      const alignment = header.textAlign ?? \"left\";\n      for (let i = 0; i < span; i++) {\n        acc.push(alignment);\n      }\n      return acc;\n    }, []);\n\n    this.headerRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n\n    this.tableRows.forEach(row => {\n      row.columnAlignments = [...headerAlignments];\n    });\n  }\n\n  private _extractCellText(row: SgdsDataTableRow, columnIndex: number) {\n    const rowCellText = row.getCellText(columnIndex);\n    if (rowCellText) return rowCellText;\n\n    const cells = Array.from(row.children).filter(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    const cell = cells[columnIndex];\n    return (cell?.textContent || \"\").trim();\n  }\n\n  private _getRowData(row: SgdsDataTableRow): Record<string, string> {\n    const data: Record<string, string> = {};\n    this._headerCells.forEach((header, index) => {\n      const key = header.sortKey || (header.textContent ?? \"\").trim() || `col-${index}`;\n      data[key] = this._extractCellText(row, index);\n    });\n    return data;\n  }\n\n  private _toComparableValue(row: SgdsDataTableRow, _key: string, columnIndex: number) {\n    return this._extractCellText(row, columnIndex);\n  }\n\n  private _compareValues(left: unknown, right: unknown, direction: \"ascending\" | \"descending\") {\n    if (left === right) return 0;\n\n    const leftNumber = Number(left);\n    const rightNumber = Number(right);\n    const bothNumeric = Number.isFinite(leftNumber) && Number.isFinite(rightNumber);\n\n    if (bothNumeric) {\n      return direction === \"ascending\" ? leftNumber - rightNumber : rightNumber - leftNumber;\n    }\n\n    const cmp = String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: \"base\" });\n    return direction === \"ascending\" ? cmp : -cmp;\n  }\n\n  private _resetOtherHeaderSortStates(activeHeader: SgdsDataTableHead | null) {\n    this._headerCells.forEach(header => {\n      if (header !== activeHeader && header.sorting) {\n        header.sortDirection = \"none\";\n      }\n    });\n  }\n\n  private _getRowsInInitialPositionOrder(rows: SgdsDataTableRow[]) {\n    return [...rows].sort((left, right) => {\n      const leftPosition = this._initialRowPositions.get(left);\n      const rightPosition = this._initialRowPositions.get(right);\n\n      if (leftPosition === undefined && rightPosition === undefined) return 0;\n      if (leftPosition === undefined) return 1;\n      if (rightPosition === undefined) return -1;\n      return leftPosition - rightPosition;\n    });\n  }\n\n  private _captureInitialRowPositions(rows: SgdsDataTableRow[]) {\n    if (this._hasCapturedInitialRowPositions) return;\n\n    rows.forEach((row, index) => {\n      this._initialRowPositions.set(row, index);\n    });\n\n    this._hasCapturedInitialRowPositions = true;\n  }\n\n  private _handleSort(e: Event) {\n    const activeHeader = e.composedPath().find(node => node instanceof SgdsDataTableHead) as\n      | SgdsDataTableHead\n      | undefined;\n\n    if (!activeHeader || !activeHeader.sorting) return;\n\n    const { key, direction } = (e as CustomEvent<ISgdsDataTableSortEventDetail>).detail;\n    const columnIndex = activeHeader ? this._headerCells.indexOf(activeHeader) : -1;\n\n    this._resetOtherHeaderSortStates(activeHeader);\n\n    if (this.serverSort) {\n      e.stopPropagation();\n      this.emit(\"sgds-sort\", { detail: { key, direction } });\n      return;\n    }\n\n    if (columnIndex < 0) return;\n\n    if (direction === \"none\") {\n      this.tableRows = this._getRowsInInitialPositionOrder(this.tableRows);\n      if (this.mode === \"client\") this.currentPage = 1;\n      this._syncDomRowOrder();\n      this._updateVisibleRows();\n      return;\n    }\n\n    this.tableRows = [...this.tableRows].sort((left, right) => {\n      const leftValue = this._toComparableValue(left, key, columnIndex);\n      const rightValue = this._toComparableValue(right, key, columnIndex);\n      return this._compareValues(leftValue, rightValue, direction);\n    });\n\n    if (this.mode === \"client\") this.currentPage = 1;\n    this._syncDomRowOrder();\n    this._updateVisibleRows();\n  }\n\n  private _syncDomRowOrder() {\n    const parent = this.tableRows[0]?.parentElement;\n    if (!parent) return;\n    this.tableRows.forEach(row => parent.appendChild(row));\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slotted = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(el => el instanceof SgdsDataTableRow) as SgdsDataTableRow[];\n\n    const rowTableChildren = (row: SgdsDataTableRow) =>\n      Array.from(row.children).filter(child => {\n        const tagName = child.tagName.toLowerCase();\n        const isTableCell = tagName === \"sgds-data-table-cell\" || tagName === \"sgds-data-table-head\";\n        if (!isTableCell) return false;\n        return child.getAttribute(\"slot\") !== \"content\";\n      });\n\n    this.headerRows = slotted.filter(row =>\n      rowTableChildren(row).some(child => child.tagName.toLowerCase() === \"sgds-data-table-head\")\n    );\n\n    this.tableRows = slotted.filter(row => {\n      const children = rowTableChildren(row);\n      return children.length > 0 && children.every(child => child.tagName.toLowerCase() === \"sgds-data-table-cell\");\n    });\n\n    this._headerCells = this.headerRows.reduce<SgdsDataTableHead[]>((acc, row) => {\n      const headers = Array.from(row.children).filter(\n        child => child instanceof SgdsDataTableHead\n      ) as SgdsDataTableHead[];\n      acc.push(...headers);\n      return acc;\n    }, []);\n\n    this._captureInitialRowPositions(this.tableRows);\n\n    this._headerCells.forEach(header => {\n      if (header.sorting && !header.sortDirection) {\n        header.sortDirection = \"none\";\n      }\n    });\n\n    this._configureRows();\n    this._updateVisibleRows();\n  }\n\n  private _updateVisibleRows() {\n    if (this.loading) {\n      this.tableRows.forEach(row => (row.style.display = \"none\"));\n      return;\n    }\n\n    if (this.mode === \"server\") {\n      this.tableRows.forEach(row => (row.style.display = \"\"));\n      return;\n    }\n\n    const total = this.dataLength || this.tableRows.length;\n    const lastPage = Math.max(1, Math.ceil(total / this.itemsPerPage));\n    if (this.currentPage > lastPage) {\n      this.currentPage = lastPage;\n      return;\n    }\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const visible = new Set(this.tableRows.slice(start, start + this.itemsPerPage));\n    this.tableRows.forEach(row => (row.style.display = visible.has(row) ? \"\" : \"none\"));\n  }\n\n  private _getSkeletonColumnCount(): { dataColumns: number; hasExpand: boolean; hasCheckbox: boolean } {\n    const headerColumnCount = this._headerCells.reduce((count, header) => {\n      const span = Number(header.colSpan) > 0 ? Number(header.colSpan) : 1;\n      return count + span;\n    }, 0);\n\n    const firstBodyRow = this.tableRows[0];\n    const fallbackBodyColumnCount = firstBodyRow\n      ? Array.from(firstBodyRow.children).filter(child => child instanceof SgdsDataTableCell).length\n      : 0;\n\n    const hasExpand = this.tableRows.some(row => row.expand);\n    const dataColumns = headerColumnCount || fallbackBodyColumnCount || 1;\n\n    return { dataColumns, hasExpand, hasCheckbox: this.multiSelect };\n  }\n\n  private _renderLoadingSkeleton() {\n    const { dataColumns, hasExpand, hasCheckbox } = this._getSkeletonColumnCount();\n    const skeletonRows = Math.max(1, this.itemsPerPage || 1);\n\n    return Array.from(\n      { length: skeletonRows },\n      () =>\n        html`<div class=\"skeleton-row\" role=\"presentation\">\n          ${hasExpand\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"20px\"} .width=${\"20px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${hasCheckbox\n            ? html`<div class=\"skeleton-cell control-cell\">\n                <sgds-skeleton .height=${\"24px\"} .width=${\"24px\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n            : nothing}\n          ${Array.from(\n            { length: dataColumns },\n            () =>\n              html`<div class=\"skeleton-cell\">\n                <sgds-skeleton .height=${\"100%\"} .borderRadius=${\"4px\"}></sgds-skeleton>\n              </div>`\n          )}\n        </div>`\n    );\n  }\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has(\"currentPage\") || changed.has(\"itemsPerPage\") || changed.has(\"mode\") || changed.has(\"loading\")) {\n      this._updateVisibleRows();\n    }\n    if (changed.has(\"multiSelect\")) {\n      this._configureRows();\n    }\n\n    if (this.multiSelect && (changed.has(\"tableRows\") || changed.has(\"headerRows\"))) {\n      this._syncHeaderCheckboxAfterRender();\n    }\n  }\n\n  render() {\n    const total = this.dataLength || this.tableRows.length;\n    const start = (this.currentPage - 1) * this.itemsPerPage;\n    const end = Math.min(start + this.itemsPerPage, total);\n    const displayStart = total === 0 ? 0 : start + 1;\n    const showNoData = !this.loading && this.tableRows.length === 0;\n    const showFooter = total !== 0;\n\n    return html`\n      <div class=\"data-table\">\n        <div class=\"table-container\">\n          <div class=\"table\" role=\"table\">\n            <slot @slotchange=${this._handleSlotChange} @i-sgds-sort=${this._handleSort}></slot>\n            ${this.loading ? this._renderLoadingSkeleton() : nothing}\n          </div>\n          ${!this.loading && showNoData\n            ? html`<slot name=\"no-data\" class=\"no-data\" role=\"status\" aria-live=\"polite\">No data</slot>`\n            : nothing}\n        </div>\n\n        ${showFooter\n          ? html`<div class=\"footer\">\n              ${this.loading\n                ? html`<span></span>`\n                : this.paginationSummary || html`<span>Showing ${displayStart} to ${end} of ${total} results</span>`}\n              <sgds-pagination\n                .dataLength=${total}\n                .currentPage=${this.currentPage}\n                .itemsPerPage=${this.itemsPerPage}\n                .variant=${this.paginationVariant}\n                size=\"sm\"\n                @sgds-page-change=${(e: CustomEvent<ISgdsPaginationPageChangeEventDetail>) => {\n                  this.currentPage = e.detail.currentPage;\n                  this.emit(\"sgds-page-change\");\n                }}\n              ></sgds-pagination>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsDataTable;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,gBAAb,cAAmC,YAAY;;;EAoBF,KAAA,cAAA;EAGF,KAAA,aAAA;EAGC,KAAA,cAAA;EAGC,KAAA,eAAA;EAGK,KAAA,oBAAA;EAGT,KAAA,UAAA;EAGG,KAAA,aAAA;EAGuD,KAAA,oBAAA;EAQ3B,KAAA,SAAA;EAOd,KAAA,OAAA;EAEP,KAAA,YAAA,CAAC;EACA,KAAA,aAAA,CAAC;EAEP,KAAA,eAAA,CAAC;EACd,KAAA,uCAAA,IAAI,QAAkC;EAC3B,KAAA,kCAAA;EAEnB,KAAA,+BAAA,IAAI,QAAyC;;;EAhEpD,KAAA,SAAA;GACd,GAAG,YAAY;GACfA;GACA,GAAG;;;;;EAKL;;;EAGsB,KAAA,eAAA;GACpB,mBAAmB;GACnB,wBAAwB;GACxB,wBAAwB;GACxB,iBAAiB;EACnB;;CAkDA,oBAAoB;EAClB,MAAM,kBAAkB;CAC1B;CAEA,cAAsB,KAAuB;EAC3C,OAAO,IAAI,WAAW,IAAI,UAAU,YAAY;CAClD;CAEA,wBAAgC;EAC9B,MAAM,eAAe,KAAK,UAAU,QAAO,MAAK,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC;EAEvE,MAAM,aAAa,iBAAiB,KAAK,UAAU,UAAU,eAAe;EAE5E,KAAK,WAAW,SAAQ,MAAK;GAC3B,EAAE,UAAU;GACZ,IAAI,EAAE,UAAU;IACd,EAAE,SAAS,UAAU;IACrB,EAAE,SAAS,gBAAgB,eAAe,KAAK,CAAC;GAClD;EACF,CAAC;CACH;CAEA,MAAc,iCAAiC;EAC7C,IAAI,CAAC,KAAK,eAAe,KAAK,WAAW,WAAW,GAAG;EAEvD,MAAM,OAAO,CAAC,GAAG,KAAK,YAAY,GAAG,KAAK,SAAS;EACnD,MAAM,QAAQ,IAAI,KAAK,KAAI,QAAO,IAAI,cAAc,CAAC;EACrD,KAAK,sBAAsB;CAC7B;CAEA,iBAAyB;EACvB,MAAM,WAAW,KAAK,UAAU,QAAO,MAAK,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,KAAI,MAAK,KAAK,YAAY,CAAC,CAAC;EAC/F,KAAK,KAAK,mBAAmB,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvD;CAEA,mBAA2B,KAAuB;EAChD,MAAM,MAAM,KAAK,aAAa,IAAI,GAAG;EACrC,IAAI,KAAK,IAAI,oBAAoB,iBAAiB,GAAG;EAErD,MAAM,WAA0B,MAAa;GAC3C,MAAM,EAAE,YAAa,EAAwC;GAE7D,IAAI,KAAK,WAAW,SAAS,GAAG,GAC9B,KAAK,UAAU,SAAQ,MAAK;IAC1B,EAAE,UAAU;IACZ,IAAI,EAAE,UAAU,EAAE,SAAS,UAAU;GACvC,CAAC;QACI;IACL,IAAI,UAAU;IACd,KAAK,sBAAsB;GAC7B;GACA,KAAK,eAAe;EACtB;EAEA,KAAK,aAAa,IAAI,KAAK,OAAO;EAClC,IAAI,iBAAiB,iBAAiB,OAAO;CAC/C;CAEA,iBAAyB;EACvB,MAAM,YAAY,KAAK,UAAU,MAAK,MAAK,EAAE,MAAM;EACnD,MAAM,cAAc,KAAK,UAAU,SAAS;EAE5C,KAAK,WAAW,SAAQ,QAAO;GAC7B,IAAI,eAAe,KAAK;GACxB,IAAI,wBAAwB;GAC5B,IAAI,cAAc;GAClB,IAAI,KAAK,aAAa,KAAK,mBAAmB,GAAG;EACnD,CAAC;EAED,KAAK,UAAU,SAAQ,QAAO;GAC5B,IAAI,eAAe,KAAK;GACxB,IAAI,wBAAwB,CAAC,IAAI,UAAU;GAC3C,IAAI,KAAK,aAAa,KAAK,mBAAmB,GAAG;EACnD,CAAC;EAED,IAAI,KAAK,aACP,KAAK,+BAA+B;EAGtC,KAAK,sBAAsB;CAC7B;CAEA,wBAAgC;EAC9B,MAAM,mBAAmB,KAAK,aAAa,QAAiC,KAAK,WAAW;GAC1F,MAAM,OAAO,OAAO,OAAO,OAAO,IAAI,IAAI,OAAO,OAAO,OAAO,IAAI;GACnE,MAAM,YAAY,OAAO,aAAa;GACtC,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,KACxB,IAAI,KAAK,SAAS;GAEpB,OAAO;EACT,GAAG,CAAC,CAAC;EAEL,KAAK,WAAW,SAAQ,QAAO;GAC7B,IAAI,mBAAmB,CAAC,GAAG,gBAAgB;EAC7C,CAAC;EAED,KAAK,UAAU,SAAQ,QAAO;GAC5B,IAAI,mBAAmB,CAAC,GAAG,gBAAgB;EAC7C,CAAC;CACH;CAEA,iBAAyB,KAAuB,aAAqB;EACnE,MAAM,cAAc,IAAI,YAAY,WAAW;EAC/C,IAAI,aAAa,OAAO;EAIxB,QAFc,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QAAO,UAAS,MAAM,QAAQ,YAAY,MAAM,sBACtE,CAAC,CAAC,YACP,EAAE,eAAe,GAAA,CAAI,KAAK;CACxC;CAEA,YAAoB,KAA+C;EACjE,MAAM,OAA+B,CAAC;EACtC,KAAK,aAAa,SAAS,QAAQ,UAAU;GAC3C,MAAM,MAAM,OAAO,YAAY,OAAO,eAAe,GAAA,CAAI,KAAK,KAAK,OAAO;GAC1E,KAAK,OAAO,KAAK,iBAAiB,KAAK,KAAK;EAC9C,CAAC;EACD,OAAO;CACT;CAEA,mBAA2B,KAAuB,MAAc,aAAqB;EACnF,OAAO,KAAK,iBAAiB,KAAK,WAAW;CAC/C;CAEA,eAAuB,MAAe,OAAgB,WAAuC;EAC3F,IAAI,SAAS,OAAO,OAAO;EAE3B,MAAM,aAAa,OAAO,IAAI;EAC9B,MAAM,cAAc,OAAO,KAAK;EAGhC,IAFoB,OAAO,SAAS,UAAU,KAAK,OAAO,SAAS,WAAW,GAG5E,OAAO,cAAc,cAAc,aAAa,cAAc,cAAc;EAG9E,MAAM,MAAM,OAAO,IAAI,CAAC,CAAC,cAAc,OAAO,KAAK,GAAG,KAAA,GAAW;GAAE,SAAS;GAAM,aAAa;EAAO,CAAC;EACvG,OAAO,cAAc,cAAc,MAAM,CAAC;CAC5C;CAEA,4BAAoC,cAAwC;EAC1E,KAAK,aAAa,SAAQ,WAAU;GAClC,IAAI,WAAW,gBAAgB,OAAO,SACpC,OAAO,gBAAgB;EAE3B,CAAC;CACH;CAEA,+BAAuC,MAA0B;EAC/D,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,MAAM,UAAU;GACrC,MAAM,eAAe,KAAK,qBAAqB,IAAI,IAAI;GACvD,MAAM,gBAAgB,KAAK,qBAAqB,IAAI,KAAK;GAEzD,IAAI,iBAAiB,KAAA,KAAa,kBAAkB,KAAA,GAAW,OAAO;GACtE,IAAI,iBAAiB,KAAA,GAAW,OAAO;GACvC,IAAI,kBAAkB,KAAA,GAAW,OAAO;GACxC,OAAO,eAAe;EACxB,CAAC;CACH;CAEA,4BAAoC,MAA0B;EAC5D,IAAI,KAAK,iCAAiC;EAE1C,KAAK,SAAS,KAAK,UAAU;GAC3B,KAAK,qBAAqB,IAAI,KAAK,KAAK;EAC1C,CAAC;EAED,KAAK,kCAAkC;CACzC;CAEA,YAAoB,GAAU;EAC5B,MAAM,eAAe,EAAE,aAAa,CAAC,CAAC,MAAK,SAAQ,gBAAgB,iBAAiB;EAIpF,IAAI,CAAC,gBAAgB,CAAC,aAAa,SAAS;EAE5C,MAAM,EAAE,KAAK,cAAe,EAAiD;EAC7E,MAAM,cAAc,eAAe,KAAK,aAAa,QAAQ,YAAY,IAAI;EAE7E,KAAK,4BAA4B,YAAY;EAE7C,IAAI,KAAK,YAAY;GACnB,EAAE,gBAAgB;GAClB,KAAK,KAAK,aAAa,EAAE,QAAQ;IAAE;IAAK;GAAU,EAAE,CAAC;GACrD;EACF;EAEA,IAAI,cAAc,GAAG;EAErB,IAAI,cAAc,QAAQ;GACxB,KAAK,YAAY,KAAK,+BAA+B,KAAK,SAAS;GACnE,IAAI,KAAK,SAAS,UAAU,KAAK,cAAc;GAC/C,KAAK,iBAAiB;GACtB,KAAK,mBAAmB;GACxB;EACF;EAEA,KAAK,YAAY,CAAC,GAAG,KAAK,SAAS,CAAC,CAAC,MAAM,MAAM,UAAU;GACzD,MAAM,YAAY,KAAK,mBAAmB,MAAM,KAAK,WAAW;GAChE,MAAM,aAAa,KAAK,mBAAmB,OAAO,KAAK,WAAW;GAClE,OAAO,KAAK,eAAe,WAAW,YAAY,SAAS;EAC7D,CAAC;EAED,IAAI,KAAK,SAAS,UAAU,KAAK,cAAc;EAC/C,KAAK,iBAAiB;EACtB,KAAK,mBAAmB;CAC1B;CAEA,mBAA2B;EACzB,MAAM,SAAS,KAAK,UAAU,EAAE,EAAE;EAClC,IAAI,CAAC,QAAQ;EACb,KAAK,UAAU,SAAQ,QAAO,OAAO,YAAY,GAAG,CAAC;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,UAAW,EAAE,OAChB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QAAO,OAAM,cAAc,gBAAgB;EAE9C,MAAM,oBAAoB,QACxB,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QAAO,UAAS;GACvC,MAAM,UAAU,MAAM,QAAQ,YAAY;GAE1C,IAAI,EADgB,YAAY,0BAA0B,YAAY,yBACpD,OAAO;GACzB,OAAO,MAAM,aAAa,MAAM,MAAM;EACxC,CAAC;EAEH,KAAK,aAAa,QAAQ,QAAO,QAC/B,iBAAiB,GAAG,CAAC,CAAC,MAAK,UAAS,MAAM,QAAQ,YAAY,MAAM,sBAAsB,CAC5F;EAEA,KAAK,YAAY,QAAQ,QAAO,QAAO;GACrC,MAAM,WAAW,iBAAiB,GAAG;GACrC,OAAO,SAAS,SAAS,KAAK,SAAS,OAAM,UAAS,MAAM,QAAQ,YAAY,MAAM,sBAAsB;EAC9G,CAAC;EAED,KAAK,eAAe,KAAK,WAAW,QAA6B,KAAK,QAAQ;GAC5E,MAAM,UAAU,MAAM,KAAK,IAAI,QAAQ,CAAC,CAAC,QACvC,UAAS,iBAAiB,iBAC5B;GACA,IAAI,KAAK,GAAG,OAAO;GACnB,OAAO;EACT,GAAG,CAAC,CAAC;EAEL,KAAK,4BAA4B,KAAK,SAAS;EAE/C,KAAK,aAAa,SAAQ,WAAU;GAClC,IAAI,OAAO,WAAW,CAAC,OAAO,eAC5B,OAAO,gBAAgB;EAE3B,CAAC;EAED,KAAK,eAAe;EACpB,KAAK,mBAAmB;CAC1B;CAEA,qBAA6B;EAC3B,IAAI,KAAK,SAAS;GAChB,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,MAAO;GAC1D;EACF;EAEA,IAAI,KAAK,SAAS,UAAU;GAC1B,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,EAAG;GACtD;EACF;EAEA,MAAM,QAAQ,KAAK,cAAc,KAAK,UAAU;EAChD,MAAM,WAAW,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,KAAK,YAAY,CAAC;EACjE,IAAI,KAAK,cAAc,UAAU;GAC/B,KAAK,cAAc;GACnB;EACF;EACA,MAAM,SAAS,KAAK,cAAc,KAAK,KAAK;EAC5C,MAAM,UAAU,IAAI,IAAI,KAAK,UAAU,MAAM,OAAO,QAAQ,KAAK,YAAY,CAAC;EAC9E,KAAK,UAAU,SAAQ,QAAQ,IAAI,MAAM,UAAU,QAAQ,IAAI,GAAG,IAAI,KAAK,MAAO;CACpF;CAEA,0BAAqG;EACnG,MAAM,oBAAoB,KAAK,aAAa,QAAQ,OAAO,WAAW;GAEpE,OAAO,SADM,OAAO,OAAO,OAAO,IAAI,IAAI,OAAO,OAAO,OAAO,IAAI;EAErE,GAAG,CAAC;EAEJ,MAAM,eAAe,KAAK,UAAU;EACpC,MAAM,0BAA0B,eAC5B,MAAM,KAAK,aAAa,QAAQ,CAAC,CAAC,QAAO,UAAS,iBAAiB,iBAAiB,CAAC,CAAC,SACtF;EAEJ,MAAM,YAAY,KAAK,UAAU,MAAK,QAAO,IAAI,MAAM;EAGvD,OAAO;GAAE,aAFW,qBAAqB,2BAA2B;GAE9C;GAAW,aAAa,KAAK;EAAY;CACjE;CAEA,yBAAiC;EAC/B,MAAM,EAAE,aAAa,WAAW,gBAAgB,KAAK,wBAAwB;EAC7E,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,gBAAgB,CAAC;EAEvD,OAAO,MAAM,KACX,EAAE,QAAQ,aAAa,SAErB,IAAI;YACA,YACE,IAAI;yCACuB,OAAO,UAAU,OAAO,iBAAiB,MAAM;wBAE1E,QAAQ;YACV,cACE,IAAI;yCACuB,OAAO,UAAU,OAAO,iBAAiB,MAAM;wBAE1E,QAAQ;YACV,MAAM,KACN,EAAE,QAAQ,YAAY,SAEpB,IAAI;yCACuB,OAAO,iBAAiB,MAAM;qBAE7D,EAAE;eAER;CACF;CAEA,QAAQ,SAA+B;EACrC,IAAI,QAAQ,IAAI,aAAa,KAAK,QAAQ,IAAI,cAAc,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ,IAAI,SAAS,GAC3G,KAAK,mBAAmB;EAE1B,IAAI,QAAQ,IAAI,aAAa,GAC3B,KAAK,eAAe;EAGtB,IAAI,KAAK,gBAAgB,QAAQ,IAAI,WAAW,KAAK,QAAQ,IAAI,YAAY,IAC3E,KAAK,+BAA+B;CAExC;CAEA,SAAS;EACP,MAAM,QAAQ,KAAK,cAAc,KAAK,UAAU;EAChD,MAAM,SAAS,KAAK,cAAc,KAAK,KAAK;EAC5C,MAAM,MAAM,KAAK,IAAI,QAAQ,KAAK,cAAc,KAAK;EACrD,MAAM,eAAe,UAAU,IAAI,IAAI,QAAQ;EAC/C,MAAM,aAAa,CAAC,KAAK,WAAW,KAAK,UAAU,WAAW;EAC9D,MAAM,aAAa,UAAU;EAE7B,OAAO,IAAI;;;;gCAIiB,KAAK,kBAAkB,gBAAgB,KAAK,YAAY;cAC1E,KAAK,UAAU,KAAK,uBAAuB,IAAI,QAAQ;;YAEzD,CAAC,KAAK,WAAW,aACf,IAAI,yFACJ,QAAQ;;;UAGZ,aACE,IAAI;gBACA,KAAK,UACH,IAAI,kBACJ,KAAK,qBAAqB,IAAI,iBAAiB,aAAa,MAAM,IAAI,MAAM,MAAM,iBAAiB;;8BAEvF,MAAM;+BACL,KAAK,YAAY;gCAChB,KAAK,aAAa;2BACvB,KAAK,kBAAkB;;qCAEb,MAAyD;GAC5E,KAAK,cAAc,EAAE,OAAO;GAC5B,KAAK,KAAK,kBAAkB;EAC9B,EAAE;;sBAGN,QAAQ;;;CAGlB;AACF;AAxaG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,gBAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,qBAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,WAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,qBAAA,KAAA,CAAA;AAQzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,UAAA,KAAA,CAAA;AAOxC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA;AAEzB,WAAA,CAAA,MAAM,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA"}

package/react/components/Modal/sgds-modal.cjs.js

@@ -213,9 +213,9 @@ var SgdsModal = class extends require_sgds_element.default {
                 <slot name="description"></slot>
               </div>
             </div>
-            <div class="modal-body" tabindex="0">
+            <section class="modal-body" tabindex="0" aria-label="Modal body content">
               <slot></slot>
-            </div>
+            </section>
           </div class="modal-content">
           <div class="modal-footer">
             <slot name="footer"></slot>