@govtechsg/sgds-web-component 3.10.0-rc.4 → 3.10.0

package/components/Table/sgds-table-cell.js

@@ -13,7 +13,7 @@ class SgdsTableCell extends SgdsElement {
         this.setAttribute("role", "cell");
     }
     render() {
-        return html ` <slot class="table-cell"></slot> `;
+        return html `<div class="table-cell"><slot></slot></div>`;
     }
 }
 SgdsTableCell.styles = [...SgdsElement.styles, css_248z];

package/components/Table/sgds-table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table-cell.js","sources":["../../../src/components/Table/sgds-table-cell.ts"],"sourcesContent":["import { html } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableCellStyle from \"./table-cell.css\";\n\n/**\n * @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.\n *\n *  @slot - Insert any elements to be rendered as the cell’s content.\n */\nexport class SgdsTableCell extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableCellStyle];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"cell\");\n  }\n\n  render() {\n    return html` <slot class=\"table-cell\"></slot> `;\n  }\n}\n\nexport default SgdsTableCell;\n"],"names":["tableCellStyle"],"mappings":";;;;AAIA;;;;AAIG;AACG,MAAO,aAAc,SAAQ,WAAW,CAAA;IAG5C,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACnC;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,kCAAA,CAAoC,CAAC;KACjD;;AATM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAC;;;;"}
+{"version":3,"file":"sgds-table-cell.js","sources":["../../../src/components/Table/sgds-table-cell.ts"],"sourcesContent":["import { html } from \"lit\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableCellStyle from \"./table-cell.css\";\n\n/**\n * @summary Table cell is used for presenting individual data values, interactive elements, or custom content within a table row.\n *\n *  @slot - Insert any elements to be rendered as the cell’s content.\n */\nexport class SgdsTableCell extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableCellStyle];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"cell\");\n  }\n\n  render() {\n    return html`<div class=\"table-cell\"><slot></slot></div>`;\n  }\n}\n\nexport default SgdsTableCell;\n"],"names":["tableCellStyle"],"mappings":";;;;AAKA;;;;AAIG;AACG,MAAO,aAAc,SAAQ,WAAW,CAAA;IAG5C,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACnC;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,2CAAA,CAA6C,CAAC;KAC1D;;AATM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAC;;;;"}

package/components/Table/sgds-table-head.d.ts

@@ -6,12 +6,9 @@ import SgdsElement from "../../base/sgds-element";
  */
 export declare class SgdsTableHead extends SgdsElement {
     static styles: import("lit").CSSResult[];
-    /**
-     * To indicate if the header will have a darker bottom border style
-     */
-    private border;
-    _handleBorderChange(): void;
+    private _headerBackground;
     connectedCallback(): void;
+    _handleHeaderBackground(): void;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsTableHead;

package/components/Table/sgds-table-head.js

@@ -1,9 +1,12 @@
 import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { state } from 'lit/decorators.js';
 import SgdsElement from '../../base/sgds-element.js';
-import { watch } from '../../utils/watch.js';
 import css_248z from './table-head.js';
+import { consume } from '@lit/context';
+import { TableHeaderBackgroundContext } from './table-context.js';
+import { state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { watch } from '../../utils/watch.js';
 
 /**
  * @summary Table head represents a table header cell that identifies a group of information within the table.
@@ -13,31 +16,37 @@ import css_248z from './table-head.js';
 class SgdsTableHead extends SgdsElement {
     constructor() {
         super(...arguments);
-        /**
-         * To indicate if the header will have a darker bottom border style
-         */
-        this.border = false;
-    }
-    _handleBorderChange() {
-        var _a, _b;
-        this.border = ((_b = (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== "sgds-table-cell";
-        this.border ? this.setAttribute("border", "true") : this.removeAttribute("border");
+        this._headerBackground = false;
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute("role", "columnheader");
     }
+    _handleHeaderBackground() {
+        if (this._headerBackground)
+            this.setAttribute("headerBackground", "true");
+        else
+            this.removeAttribute("headerBackground");
+    }
     render() {
-        return html `<slot></slot>`;
+        return html `<div
+      class=${classMap({
+            "table-head": true,
+            "header-background": this._headerBackground
+        })}
+    >
+      <slot></slot>
+    </div>`;
     }
 }
 SgdsTableHead.styles = [...SgdsElement.styles, css_248z];
 __decorate([
+    consume({ context: TableHeaderBackgroundContext, subscribe: true }),
     state()
-], SgdsTableHead.prototype, "border", void 0);
+], SgdsTableHead.prototype, "_headerBackground", void 0);
 __decorate([
-    watch("border")
-], SgdsTableHead.prototype, "_handleBorderChange", null);
+    watch("_headerBackground")
+], SgdsTableHead.prototype, "_handleHeaderBackground", null);
 
 export { SgdsTableHead, SgdsTableHead as default };
 //# sourceMappingURL=sgds-table-head.js.map

package/components/Table/sgds-table-head.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table-head.js","sources":["../../../src/components/Table/sgds-table-head.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tableHeadStyle from \"./table-head.css\";\n\n/**\n * @summary Table head represents a table header cell that identifies a group of information within the table.\n *\n * @slot - Place any elements inside to display as the header content.\n */\nexport class SgdsTableHead extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableHeadStyle];\n  /**\n   * To indicate if the header will have a darker bottom border style\n   */\n  @state() private border = false;\n\n  @watch(\"border\")\n  _handleBorderChange() {\n    this.border = this.nextElementSibling?.tagName?.toLowerCase() !== \"sgds-table-cell\";\n    this.border ? this.setAttribute(\"border\", \"true\") : this.removeAttribute(\"border\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"columnheader\");\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\nexport default SgdsTableHead;\n"],"names":["tableHeadStyle"],"mappings":";;;;;;;AAMA;;;;AAIG;AACG,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;AAEE;;AAEG;QACc,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAgBjC;IAbC,mBAAmB,GAAA;;AACjB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAA,CAAA,EAAA,GAAA,MAAA,IAAI,CAAC,kBAAkB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAW,EAAE,MAAK,iBAAiB,CAAC;QACpF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;KACpF;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;KAC3C;IAED,MAAM,GAAA;QACJ,OAAO,IAAI,CAAA,CAAA,aAAA,CAAe,CAAC;KAC5B;;AAnBM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAzC,CAA2C;AAIvC,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAAwB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhC,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAIf,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-table-head.js","sources":["../../../src/components/Table/sgds-table-head.ts"],"sourcesContent":["import { html } from \"lit\";\n\nimport SgdsElement from \"../../base/sgds-element\";\nimport tableHeadStyle from \"./table-head.css\";\n\nimport { consume } from \"@lit/context\";\nimport { TableHeaderBackgroundContext } from \"./table-context\";\nimport { state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\n\n/**\n * @summary Table head represents a table header cell that identifies a group of information within the table.\n *\n * @slot - Place any elements inside to display as the header content.\n */\n\nexport class SgdsTableHead extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableHeadStyle];\n\n  @consume({ context: TableHeaderBackgroundContext, subscribe: true })\n  @state()\n  private _headerBackground = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"columnheader\");\n  }\n\n  @watch(\"_headerBackground\")\n  _handleHeaderBackground() {\n    if (this._headerBackground) this.setAttribute(\"headerBackground\", \"true\");\n    else this.removeAttribute(\"headerBackground\");\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        \"table-head\": true,\n        \"header-background\": this._headerBackground\n      })}\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n\nexport default SgdsTableHead;\n"],"names":["tableHeadStyle"],"mappings":";;;;;;;;;;AAWA;;;;AAIG;AAEG,MAAO,aAAc,SAAQ,WAAW,CAAA;AAA9C,IAAA,WAAA,GAAA;;QAKU,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;KAuBnC;IArBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;KAC3C;IAGD,uBAAuB,GAAA;QACrB,IAAI,IAAI,CAAC,iBAAiB;AAAE,YAAA,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;;AACrE,YAAA,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC/C;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACD,YAAA,EAAA,QAAQ,CAAC;AACf,YAAA,YAAY,EAAE,IAAI;YAClB,mBAAmB,EAAE,IAAI,CAAC,iBAAiB;SAC5C,CAAC,CAAA;;;WAGG,CAAC;KACT;;AA1BM,aAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAc,CAAzC,CAA2C;AAIhD,UAAA,CAAA;IAFP,OAAO,CAAC,EAAE,OAAO,EAAE,4BAA4B,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACnE,IAAA,KAAK,EAAE;AAC0B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQlC,UAAA,CAAA;IADC,KAAK,CAAC,mBAAmB,CAAC;AAI1B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,yBAAA,EAAA,IAAA,CAAA;;;;"}

package/components/Table/sgds-table.d.ts

@@ -9,27 +9,62 @@ export type HeaderPosition = "horizontal" | "vertical" | "both";
 export declare class SgdsTable extends SgdsElement {
     static styles: import("lit").CSSResult[];
     /**
-     * Use responsive="sm", responsive="md" , responsive="lg", or responsive="xl" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive="always" to let table be always responsive
+     * Specifies the responsive breakpoint for the table.
+     * Use "sm", "md", "lg", or "xl" to create responsive tables up to a particular breakpoint.
+     * From that breakpoint and up, the table will behave normally and not scroll horizontally.
+     * Use "always" to make the table always responsive.
+     *
+     * (@deprecated) Deprecated since 3.9.0 legacy from v2
+     * @type {"sm" | "md" | "lg" | "xl" | "always"}
      */
     responsive: "sm" | "md" | "lg" | "xl" | "always";
     /**
-     * Populate row header cells using Arrays
+     * Array of strings to populate row header cells.
+     * @type {string[]}
      */
     rowHeader: string[];
     /**
-     * Populate column header cells using Arrays only when <code>headerPosition="vertical"</code> or <code>headerPosition="both"</code>
+     * Array of strings to populate column header cells.
+     * Only used when `headerPosition` is set to "vertical" or "both".
+     * @type {string[]}
      */
     columnHeader: string[];
     /**
-     * Populate data cells using Arrays
+     * Two-dimensional array of strings or numbers to populate table data cells.
+     * @type {Array<(string | number)[]>}
      */
     tableData: Array<(string | number)[]>;
     /**
-     * Defines the placement of headers in the table (horizontal, vertical, or both)
+     * Defines the placement of headers in the table.
+     * Use "horizontal" for top headers only, "vertical" for left headers only,
+     * or "both" for both row and column headers.
+     * @type {"horizontal" | "vertical" | "both"}
+     * @default "horizontal"
      */
     headerPosition: HeaderPosition;
-    /** Used only for SSR to indicate the presence of the `default` slot. */
+    /**
+     * Enables background styling on horizontal header rows.
+     * When true, applies background color to header cells for better visual distinction.
+     * @type {boolean}
+     * @default false
+     */
+    headerBackground: boolean;
+    /**
+     * Enables borders around table cells.
+     * When true, displays visible borders between all table cells.
+     * @type {boolean}
+     * @default false
+     */
+    tableBorder: boolean;
+    /**
+     * Indicates the presence of the default slot.
+     * Used for server-side rendering to determine table structure.
+     * @type {boolean}
+     * @internal
+     * @default false
+     */
     hasDefaultSlot: boolean;
+    private _headerBackground;
     /** @internal */
     private readonly hasSlotController;
     connectedCallback(): void;

package/components/Table/sgds-table.js

@@ -1,10 +1,12 @@
 import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './table.js';
 import { HasSlotController } from '../../utils/slot.js';
+import { provide } from '@lit/context';
+import { TableHeaderBackgroundContext } from './table-context.js';
 
 /**
  * @summary Table is used for displaying collections of data in organized rows and columns.
@@ -16,23 +18,52 @@ class SgdsTable extends SgdsElement {
     constructor() {
         super(...arguments);
         /**
-         * Populate row header cells using Arrays
+         * Array of strings to populate row header cells.
+         * @type {string[]}
          */
         this.rowHeader = [];
         /**
-         * Populate column header cells using Arrays only when <code>headerPosition="vertical"</code> or <code>headerPosition="both"</code>
+         * Array of strings to populate column header cells.
+         * Only used when `headerPosition` is set to "vertical" or "both".
+         * @type {string[]}
          */
         this.columnHeader = [];
         /**
-         * Populate data cells using Arrays
+         * Two-dimensional array of strings or numbers to populate table data cells.
+         * @type {Array<(string | number)[]>}
          */
         this.tableData = [];
         /**
-         * Defines the placement of headers in the table (horizontal, vertical, or both)
+         * Defines the placement of headers in the table.
+         * Use "horizontal" for top headers only, "vertical" for left headers only,
+         * or "both" for both row and column headers.
+         * @type {"horizontal" | "vertical" | "both"}
+         * @default "horizontal"
          */
         this.headerPosition = "horizontal";
-        /** Used only for SSR to indicate the presence of the `default` slot. */
+        /**
+         * Enables background styling on horizontal header rows.
+         * When true, applies background color to header cells for better visual distinction.
+         * @type {boolean}
+         * @default false
+         */
+        this.headerBackground = false;
+        /**
+         * Enables borders around table cells.
+         * When true, displays visible borders between all table cells.
+         * @type {boolean}
+         * @default false
+         */
+        this.tableBorder = false;
+        /**
+         * Indicates the presence of the default slot.
+         * Used for server-side rendering to determine table structure.
+         * @type {boolean}
+         * @internal
+         * @default false
+         */
         this.hasDefaultSlot = false;
+        this._headerBackground = false;
         /** @internal */
         this.hasSlotController = new HasSlotController(this, "[default]");
     }
@@ -42,19 +73,20 @@ class SgdsTable extends SgdsElement {
     updated() {
         if (!this.hasDefaultSlot)
             this.hasDefaultSlot = this.hasSlotController.test("[default]");
+        this._headerBackground = this.headerBackground;
     }
     _renderTable() {
         if (this.headerPosition === "horizontal") {
             return html `
         <thead>
           <tr>
-            ${this.rowHeader.map((header) => html ` <th>${header}</th> `)}
+            ${this.rowHeader.map((header) => html ` <th><div>${header}</div></th> `)}
           </tr>
         </thead>
         <tbody>
           ${this.tableData.map(row => html `
               <tr>
-                ${row.map((cell) => html `<td>${cell}</td>`)}
+                ${row.map((cell) => html `<td><div>${cell}</div></td>`)}
               </tr>
             `)}
         </tbody>
@@ -64,15 +96,15 @@ class SgdsTable extends SgdsElement {
             return html `
         <thead>
           <tr>
-            <th></th>
-            ${this.rowHeader.map((header) => html ` <th>${header}</th> `)}
+            <th><div></div></th>
+            ${this.rowHeader.map((header) => html ` <th><div>${header}</div></th> `)}
           </tr>
         </thead>
         <tbody>
           ${this.tableData.map((row, index) => html `
               <tr>
-                <th>${this.columnHeader[index]}</th>
-                ${row.map((cell) => html `<td>${cell}</td>`)}
+                <th><div>${this.columnHeader[index]}</div></th>
+                ${row.map((cell) => html `<td><div>${cell}</div></td>`)}
               </tr>
             `)}
         </tbody>
@@ -83,8 +115,8 @@ class SgdsTable extends SgdsElement {
             return html `
         ${flippedTableData.map((row, index) => html `
             <tr>
-              <th>${this.columnHeader[index]}</th>
-              ${row.map((cell) => html `<td>${cell}</td>`)}
+              <th><div>${this.columnHeader[index]}</div></th>
+              ${row.map((cell) => html `<td><div>${cell}</div></td>`)}
             </tr>
           `)}
       `;
@@ -102,7 +134,7 @@ class SgdsTable extends SgdsElement {
         })}
         tabindex="0"
       >
-        <slot id="table-slot" class="table"></slot>
+        <slot id="table-slot" class=${classMap({ table: true, "no-border": !this.hasDefaultSlot })}></slot>
 
         ${!this.hasDefaultSlot
             ? html `<table class="table">
@@ -129,9 +161,19 @@ __decorate([
 __decorate([
     property({ type: String })
 ], SgdsTable.prototype, "headerPosition", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsTable.prototype, "headerBackground", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsTable.prototype, "tableBorder", void 0);
 __decorate([
     property({ type: Boolean })
 ], SgdsTable.prototype, "hasDefaultSlot", void 0);
+__decorate([
+    provide({ context: TableHeaderBackgroundContext }),
+    state()
+], SgdsTable.prototype, "_headerBackground", void 0);
 
 export { SgdsTable, SgdsTable as default };
 //# sourceMappingURL=sgds-table.js.map

package/components/Table/sgds-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-table.js","sources":["../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Use responsive=\"sm\", responsive=\"md\" , responsive=\"lg\", or responsive=\"xl\" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally. Use reponsive=\"always\" to let table be always responsive\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Populate row header cells using Arrays\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Populate column header cells using Arrays only when <code>headerPosition=\"vertical\"</code> or <code>headerPosition=\"both\"</code>\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Populate data cells using Arrays\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table (horizontal, vertical, or both)\n   */\n  @property({ type: String }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /** Used only for SSR to indicate the presence of the `default` slot. */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th></th>\n            ${this.rowHeader.map((header: string) => html` <th>${header}</th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th>${this.columnHeader[index]}</th>\n                ${row.map((cell: string) => html`<td>${cell}</td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th>${this.columnHeader[index]}</th>\n              ${row.map((cell: string) => html`<td>${cell}</td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <slot id=\"table-slot\" class=\"table\"></slot>\n\n        ${!this.hasDefaultSlot\n          ? html`<table class=\"table\">\n              ${this._renderTable()}\n            </table>`\n          : \"\"}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-table.js","sources":["../../../src/components/Table/sgds-table.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nimport tableStyle from \"./table.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { provide } from \"@lit/context\";\nimport { TableHeaderBackgroundContext } from \"./table-context\";\n\nexport type HeaderPosition = \"horizontal\" | \"vertical\" | \"both\";\n\n/**\n * @summary Table is used for displaying collections of data in organized rows and columns.\n * It supports two rendering methods: supply an array of data for automatic table generation, or use the slot to insert custom table elements for full structural control.\n *\n * @slot - Insert custom table elements (such as rows, headers, or cells) to define the table structure manually.\n */\n\nexport class SgdsTable extends SgdsElement {\n  static styles = [...SgdsElement.styles, tableStyle];\n\n  /**\n   * Specifies the responsive breakpoint for the table.\n   * Use \"sm\", \"md\", \"lg\", or \"xl\" to create responsive tables up to a particular breakpoint.\n   * From that breakpoint and up, the table will behave normally and not scroll horizontally.\n   * Use \"always\" to make the table always responsive.\n   *\n   * (@deprecated) Deprecated since 3.9.0 legacy from v2\n   * @type {\"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\"}\n   */\n  @property({ type: String, reflect: true }) responsive: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"always\";\n\n  /**\n   * Array of strings to populate row header cells.\n   * @type {string[]}\n   */\n  @property({ type: Array }) rowHeader: string[] = [];\n\n  /**\n   * Array of strings to populate column header cells.\n   * Only used when `headerPosition` is set to \"vertical\" or \"both\".\n   * @type {string[]}\n   */\n  @property({ type: Array }) columnHeader: string[] = [];\n\n  /**\n   * Two-dimensional array of strings or numbers to populate table data cells.\n   * @type {Array<(string | number)[]>}\n   */\n  @property({ type: Array }) tableData: Array<(string | number)[]> = [];\n\n  /**\n   * Defines the placement of headers in the table.\n   * Use \"horizontal\" for top headers only, \"vertical\" for left headers only,\n   * or \"both\" for both row and column headers.\n   * @type {\"horizontal\" | \"vertical\" | \"both\"}\n   * @default \"horizontal\"\n   */\n  @property({ type: String }) headerPosition: HeaderPosition = \"horizontal\";\n\n  /**\n   * Enables background styling on horizontal header rows.\n   * When true, applies background color to header cells for better visual distinction.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) headerBackground = false;\n\n  /**\n   * Enables borders around table cells.\n   * When true, displays visible borders between all table cells.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean }) tableBorder = false;\n\n  /**\n   * Indicates the presence of the default slot.\n   * Used for server-side rendering to determine table structure.\n   * @type {boolean}\n   * @internal\n   * @default false\n   */\n  @property({ type: Boolean }) hasDefaultSlot = false;\n\n  @provide({ context: TableHeaderBackgroundContext })\n  @state()\n  private _headerBackground = false;\n\n  /** @internal */\n  private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n    this._headerBackground = this.headerBackground;\n  }\n\n  private _renderTable() {\n    if (this.headerPosition === \"horizontal\") {\n      return html`\n        <thead>\n          <tr>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            row => html`\n              <tr>\n                ${row.map((cell: string) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"both\") {\n      return html`\n        <thead>\n          <tr>\n            <th><div></div></th>\n            ${this.rowHeader.map((header: string) => html` <th><div>${header}</div></th> `)}\n          </tr>\n        </thead>\n        <tbody>\n          ${this.tableData.map(\n            (row, index) => html`\n              <tr>\n                <th><div>${this.columnHeader[index]}</div></th>\n                ${row.map((cell: string) => html`<td><div>${cell}</div></td>`)}\n              </tr>\n            `\n          )}\n        </tbody>\n      `;\n    }\n\n    if (this.headerPosition === \"vertical\") {\n      const flippedTableData = this.tableData[0].map((_, colIndex) => this.tableData.map(row => row[colIndex]));\n\n      return html`\n        ${flippedTableData.map(\n          (row, index) => html`\n            <tr>\n              <th><div>${this.columnHeader[index]}</div></th>\n              ${row.map((cell: string) => html`<td><div>${cell}</div></td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"table-responsive\": this.responsive === \"always\",\n          \"table-responsive-sm\": this.responsive === \"sm\",\n          \"table-responsive-md\": this.responsive === \"md\",\n          \"table-responsive-lg\": this.responsive === \"lg\",\n          \"table-responsive-xl\": this.responsive === \"xl\"\n        })}\n        tabindex=\"0\"\n      >\n        <slot id=\"table-slot\" class=${classMap({ table: true, \"no-border\": !this.hasDefaultSlot })}></slot>\n\n        ${!this.hasDefaultSlot\n          ? html`<table class=\"table\">\n              ${this._renderTable()}\n            </table>`\n          : \"\"}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTable;\n"],"names":["tableStyle"],"mappings":";;;;;;;;;;AAYA;;;;;AAKG;AAEG,MAAO,SAAU,SAAQ,WAAW,CAAA;AAA1C,IAAA,WAAA,GAAA;;AAcE;;;AAGG;QACwB,IAAS,CAAA,SAAA,GAAa,EAAE,CAAC;AAEpD;;;;AAIG;QACwB,IAAY,CAAA,YAAA,GAAa,EAAE,CAAC;AAEvD;;;AAGG;QACwB,IAAS,CAAA,SAAA,GAA+B,EAAE,CAAC;AAEtE;;;;;;AAMG;QACyB,IAAc,CAAA,cAAA,GAAmB,YAAY,CAAC;AAE1E;;;;;AAKG;QAC0B,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;AAEtD;;;;;AAKG;QAC0B,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAEjD;;;;;;AAMG;QAC0B,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;QAI5C,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;;QAGjB,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;KA0F/E;IAxFC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;KAC3B;IAED,OAAO,GAAA;QACL,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;AACzF,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC;KAChD;IAEO,YAAY,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,YAAY,EAAE;AACxC,YAAA,OAAO,IAAI,CAAA,CAAA;;;AAGH,YAAA,EAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAc,KAAK,IAAI,CAAA,CAAa,UAAA,EAAA,MAAM,cAAc,CAAC,CAAA;;;;YAI/E,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,GAAG,IAAI,IAAI,CAAA,CAAA;;AAEL,gBAAA,EAAA,GAAG,CAAC,GAAG,CAAC,CAAC,IAAY,KAAK,IAAI,CAAA,CAAY,SAAA,EAAA,IAAI,aAAa,CAAC,CAAA;;aAEjE,CACF,CAAA;;OAEJ,CAAC;SACH;AAED,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;AAClC,YAAA,OAAO,IAAI,CAAA,CAAA;;;;AAIH,YAAA,EAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAc,KAAK,IAAI,CAAA,CAAa,UAAA,EAAA,MAAM,cAAc,CAAC,CAAA;;;;AAI/E,UAAA,EAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA,CAAA;;AAEL,yBAAA,EAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AACjC,gBAAA,EAAA,GAAG,CAAC,GAAG,CAAC,CAAC,IAAY,KAAK,IAAI,CAAA,CAAY,SAAA,EAAA,IAAI,aAAa,CAAC,CAAA;;aAEjE,CACF,CAAA;;OAEJ,CAAC;SACH;AAED,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,UAAU,EAAE;AACtC,YAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAE1G,YAAA,OAAO,IAAI,CAAA,CAAA;UACP,gBAAgB,CAAC,GAAG,CACpB,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA,CAAA;;AAEL,uBAAA,EAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;AACjC,cAAA,EAAA,GAAG,CAAC,GAAG,CAAC,CAAC,IAAY,KAAK,IAAI,CAAA,CAAY,SAAA,EAAA,IAAI,aAAa,CAAC,CAAA;;WAEjE,CACF,CAAA;OACF,CAAC;SACH;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,kBAAkB,EAAE,IAAI,CAAC,UAAU,KAAK,QAAQ;AAChD,YAAA,qBAAqB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;AAC/C,YAAA,qBAAqB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;AAC/C,YAAA,qBAAqB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;AAC/C,YAAA,qBAAqB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;SAChD,CAAC,CAAA;;;AAG4B,oCAAA,EAAA,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;;UAExF,CAAC,IAAI,CAAC,cAAc;cAClB,IAAI,CAAA,CAAA;gBACA,IAAI,CAAC,YAAY,EAAE,CAAA;AACd,oBAAA,CAAA;AACX,cAAE,EAAE,CAAA;;KAET,CAAC;KACH;;AAhKM,SAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,CAArC,CAAuC;AAWT,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMjE,UAAA,CAAA;AAA1B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAA0B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOzB,UAAA,CAAA;AAA1B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAA6B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAM5B,UAAA,CAAA;AAA1B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAA4C,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS1C,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA+C,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ7C,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAA0B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzB,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAqB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AASpB,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAwB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5C,UAAA,CAAA;AAFP,IAAA,OAAO,CAAC,EAAE,OAAO,EAAE,4BAA4B,EAAE,CAAC;AAClD,IAAA,KAAK,EAAE;AAC0B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Table/table-cell.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;padding:var(--sgds-padding-lg)}`;
+var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}.table-cell{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=table-cell.js.map

package/components/Table/table-context.d.ts

@@ -0,0 +1,3 @@
+export declare const TableHeaderBackgroundContext: {
+    __context__: boolean;
+};

package/components/Table/table-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '@lit/context';
+
+const TableHeaderBackgroundContext = createContext("table-header-background");
+
+export { TableHeaderBackgroundContext };
+//# sourceMappingURL=table-context.js.map

package/components/Table/table-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-context.js","sources":["../../../src/components/Table/table-context.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\n\nexport const TableHeaderBackgroundContext = createContext<boolean>(\"table-header-background\");\n"],"names":[],"mappings":";;MAEa,4BAA4B,GAAG,aAAa,CAAU,yBAAyB;;;;"}

package/components/Table/table-head.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis);display:table-cell;font-weight:700;padding:var(--sgds-padding-lg)}:host(:not([border])){border-color:var(--sgds-border-color-muted)}`;
+var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}:host([headerBackground]){background-color:var(--sgds-surface-raised)}.table-head{align-items:center;display:flex;font-weight:700;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=table-head.js.map

package/components/Table/table.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{border-color:var(--sgds-border-color-default);display:table;vertical-align:top;width:100%}.hidden{display:none}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);padding:var(--sgds-padding-lg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>thead th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-group-divider{border-top:calc(var(--sgds-border-width)*2) solid}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
+var css_248z = css`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{display:table;width:100%}.hidden{display:none}.table>:not(caption) td,.table>:not(caption) th{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.table>:not(caption) td>div,.table>:not(caption) th>div{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:first-child){border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-emphasis)}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}:host([tableBorder]) .table{border:var(--sgds-border-width-1) solid;border-color:var(--sgds-border-color-muted);border-bottom:0}:host([tableBorder]) .table.no-border{border:0}:host([headerBackground]) th{background-color:var(--sgds-surface-raised)}@media (max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media (max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=table.js.map