@govtechsg/sgds-web-component 3.21.2-rc.3 → 3.21.2-rc.5

package/components/Table/sgds-table.js

@@ -76,6 +76,7 @@ class SgdsTable extends SgdsElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        this.setAttribute("role", "table");
     }
     updated() {
         if (!this.hasDefaultSlot)
@@ -132,6 +133,7 @@ class SgdsTable extends SgdsElement {
     render() {
         return html `
       <div
+        role="rowgroup"
         class=${classMap({
             "table-responsive": this.responsive === "always",
             "table-responsive-sm": this.responsive === "sm",
@@ -141,15 +143,13 @@ class SgdsTable extends SgdsElement {
         })}
         tabindex="0"
       >
-        <div role="table">
-          <slot id="table-slot" class=${classMap({ table: true, "no-border": !this.hasDefaultSlot })}></slot>
+        <slot id="table-slot" class=${classMap({ table: true, "no-border": !this.hasDefaultSlot })}></slot>
 
-          ${!this.hasDefaultSlot
+        ${!this.hasDefaultSlot
             ? html `<table class="table">
-                ${this._renderTable()}
-              </table>`
+              ${this._renderTable()}
+            </table>`
             : ""}
-        </div>
       </div>
     `;
     }

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, 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, reflect: true }) 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, reflect: true }) 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, reflect: true }) tableBorder = false;\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   * 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 | number) => 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 | number) => 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 | number) => 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        <div role=\"table\">\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      </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, reflect: true }) 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, reflect: true }) 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, reflect: true }) tableBorder = false;\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   * 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    this.setAttribute(\"role\", \"table\");\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 | number) => 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 | number) => 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 | number) => html`<td><div>${cell}</div></td>`)}\n            </tr>\n          `\n        )}\n      `;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        role=\"rowgroup\"\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":"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"}

package/components/index.umd.min.js

@@ -3089,7 +3089,7 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
       <ul class="file-upload-list ${this.selectedFiles.length>0?"has-files":""}">
         ${t}
       </ul>
-    `}}ol.styles=[...ka.styles,al],ol.dependencies={"sgds-button":ra,"sgds-close-button":ft,"sgds-icon":Lt,"sgds-spinner":Ra},t([Ve({type:Boolean,reflect:!0})],ol.prototype,"multiple",void 0),t([Ve({type:String,reflect:!0})],ol.prototype,"accept",void 0),t([Ve({type:Boolean,reflect:!0})],ol.prototype,"hasFeedback",void 0),t([Ve({type:String,reflect:!0})],ol.prototype,"invalidFeedback",void 0),t([Ve({type:Boolean,reflect:!0})],ol.prototype,"required",void 0),t([Ve({type:String,reflect:!0})],ol.prototype,"variant",void 0),t([Ve({type:String})],ol.prototype,"ariaLabel",void 0),t([Ve({type:Boolean,reflect:!0})],ol.prototype,"noValidate",void 0),t([Ee()],ol.prototype,"selectedFiles",void 0),t([Ee()],ol.prototype,"exitingFile",void 0),t([Ee()],ol.prototype,"fileMetadata",void 0),t([Ee()],ol.prototype,"_isTouched",void 0),t([nt("disabled",{waitUntilFirstUpdate:!0})],ol.prototype,"_handleDisabledChange",null),t([nt("_isTouched",{waitUntilFirstUpdate:!0})],ol.prototype,"_handleIsTouched",null);var nl=r`.footer{background-color:var(--sgds-bg-fixed-dark);height:auto}.footer-top{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);display:flex;flex-direction:column;padding:var(--sgds-padding-2-xl) var(--sgds-padding-none)}.footer-top.has-content{gap:var(--sgds-gap-2-xl)}.footer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-heading-md)!important;font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-md)!important;margin-bottom:var(--sgds-margin-none)!important;margin-top:var(--sgds-margin-none)}slot:not([name])::slotted(*),slot[name=description]::slotted(*){color:var(--sgds-color-fixed-light);margin-bottom:var(--sgds-margin-none)!important;margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-bottom{display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-2-xl) var(--sgds-padding-none)}.footer-mandatory-links{display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--sgds-gap-sm)}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.footer-copyrights{color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}@media (min-width:768px){.footer-mandatory-links ul{flex-direction:row;gap:var(--sgds-gap-sm) var(--sgds-gap-xl)}}@media (min-width:1024px){.footer-top{padding:var(--sgds-padding-3-xl) var(--sgds-padding-none)}.footer-top.has-content{gap:var(--sgds-gap-3-xl)}slot[name=title]::slotted(*){font-size:var(--sgds-font-size-heading-md)!important;line-height:var(--sgds-line-height-md)!important}.footer-mandatory-links ul{gap:var(--sgds-gap-xl)}}@media (min-width:1280px){.footer-mandatory-links{flex-direction:row}}:host([tone=neutral]) .footer{background-color:var(--sgds-bg-default)}:host([tone=neutral]) slot[name=title]::slotted(*){color:var(--sgds-color-default)!important}:host([tone=neutral]) slot:not([name])::slotted(*),:host([tone=neutral]) slot[name=description]::slotted(*){color:var(--sgds-color-default)}:host([tone=neutral]) .footer-copyrights{color:var(--sgds-color-default)}`,rl=r`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:var(--sgds-dimension-840)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:var(--sgds-dimension-888)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:var(--sgds-dimension-1024)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}`;class ll extends He{constructor(){super(...arguments),this.copyrightLiner="Government of Singapore",this.contactHref="#",this.feedbackHref="#",this.faqHref="",this.sitemapHref="",this.privacyHref="#",this.termsOfUseHref="#",this.layout="default",this.tone="fixed-dark",this.hasDefaultSlot=!1,this.hasTitleSlot=!1,this.hasDescriptionSlot=!1,this.hasItemsSlot=!1,this.hasSlotController=new Hi(this,"[default]","title","description","items")}_handleItemsSlotChange(e){e.target.assignedElements().forEach(e=>{e.tone=this.tone})}_handleToneChange(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="items"]');null==t||t.assignedElements().forEach(e=>{e.tone=this.tone})}updated(){this.hasDefaultSlot||(this.hasDefaultSlot=this.hasSlotController.test("[default]")),this.hasTitleSlot||(this.hasTitleSlot=this.hasSlotController.test("title")),this.hasDescriptionSlot||(this.hasDescriptionSlot=this.hasSlotController.test("description")),this.hasItemsSlot||(this.hasItemsSlot=this.hasSlotController.test("items"))}get _linkTone(){return"neutral"===this.tone?"neutral":"fixed-light"}render(){return te`
+    `}}ol.styles=[...ka.styles,al],ol.dependencies={"sgds-button":ra,"sgds-close-button":ft,"sgds-icon":Lt,"sgds-spinner":Ra},t([Ve({type:Boolean,reflect:!0})],ol.prototype,"multiple",void 0),t([Ve({type:String,reflect:!0})],ol.prototype,"accept",void 0),t([Ve({type:Boolean,reflect:!0})],ol.prototype,"hasFeedback",void 0),t([Ve({type:String,reflect:!0})],ol.prototype,"invalidFeedback",void 0),t([Ve({type:Boolean,reflect:!0})],ol.prototype,"required",void 0),t([Ve({type:String,reflect:!0})],ol.prototype,"variant",void 0),t([Ve({type:String})],ol.prototype,"ariaLabel",void 0),t([Ve({type:Boolean,reflect:!0})],ol.prototype,"noValidate",void 0),t([Ee()],ol.prototype,"selectedFiles",void 0),t([Ee()],ol.prototype,"exitingFile",void 0),t([Ee()],ol.prototype,"fileMetadata",void 0),t([Ee()],ol.prototype,"_isTouched",void 0),t([nt("disabled",{waitUntilFirstUpdate:!0})],ol.prototype,"_handleDisabledChange",null),t([nt("_isTouched",{waitUntilFirstUpdate:!0})],ol.prototype,"_handleIsTouched",null);var nl=r`.footer{background-color:var(--sgds-bg-fixed-dark);height:auto}.footer-top{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-default);display:flex;flex-direction:column;padding:var(--sgds-padding-2-xl) var(--sgds-padding-none)}.footer-top.has-content{gap:var(--sgds-gap-2-xl)}.footer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-heading-md)!important;font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-tight);line-height:var(--sgds-line-height-md)!important;margin-bottom:var(--sgds-margin-none)!important;margin-top:var(--sgds-margin-none)}slot:not([name])::slotted(*),slot[name=description]::slotted(*){color:var(--sgds-color-fixed-light);margin-bottom:var(--sgds-margin-none)!important;margin-top:var(--sgds-margin-none)}.footer-items{display:grid;gap:var(--sgds-gap-md) var(--sgds-gap-lg);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.footer ul{margin:0;padding:0}.footer ul li{list-style-type:none}.footer-bottom{display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-2-xl) var(--sgds-padding-none)}.footer-mandatory-links{display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between}.footer-mandatory-links ul{display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--sgds-gap-sm)}.footer-mandatory-links ul li a,.footer-mandatory-links ul li a:focus,.footer-mandatory-links ul li a:hover{color:var(--sgds-color-fixed-light)}.footer-mandatory-links ul li a:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.footer-copyrights{color:var(--sgds-color-fixed-light);font-size:var(--sgds-font-size-label-sm);line-height:var(--sgds-line-height-2-xs)}@media (min-width:768px){.footer-mandatory-links ul{flex-direction:row;gap:var(--sgds-gap-sm) var(--sgds-gap-xl)}}@media (min-width:1024px){.footer-top{padding:var(--sgds-padding-3-xl) var(--sgds-padding-none)}.footer-top.has-content{gap:var(--sgds-gap-3-xl)}slot[name=title]::slotted(*){font-size:var(--sgds-font-size-heading-md)!important;line-height:var(--sgds-line-height-md)!important}.footer-mandatory-links ul{gap:var(--sgds-gap-xl)}}@media (min-width:1280px){.footer-mandatory-links{flex-direction:row}}:host([tone=neutral]) .footer{background-color:var(--sgds-bg-default)}:host([tone=neutral]) slot[name=title]::slotted(*){color:var(--sgds-color-default)!important}:host([tone=neutral]) slot:not([name])::slotted(*),:host([tone=neutral]) slot[name=description]::slotted(*){color:var(--sgds-color-default)}:host([tone=neutral]) .footer-copyrights{color:var(--sgds-color-default)}`,rl=r`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1600px){.sgds-container-sidebar{max-width:min(var(--sgds-dimension-1600),calc(100% - 96px))}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;class ll extends He{constructor(){super(...arguments),this.copyrightLiner="Government of Singapore",this.contactHref="#",this.feedbackHref="#",this.faqHref="",this.sitemapHref="",this.privacyHref="#",this.termsOfUseHref="#",this.layout="default",this.tone="fixed-dark",this.hasDefaultSlot=!1,this.hasTitleSlot=!1,this.hasDescriptionSlot=!1,this.hasItemsSlot=!1,this.hasSlotController=new Hi(this,"[default]","title","description","items")}_handleItemsSlotChange(e){e.target.assignedElements().forEach(e=>{e.tone=this.tone})}_handleToneChange(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="items"]');null==t||t.assignedElements().forEach(e=>{e.tone=this.tone})}updated(){this.hasDefaultSlot||(this.hasDefaultSlot=this.hasSlotController.test("[default]")),this.hasTitleSlot||(this.hasTitleSlot=this.hasSlotController.test("title")),this.hasDescriptionSlot||(this.hasDescriptionSlot=this.hasSlotController.test("description")),this.hasItemsSlot||(this.hasItemsSlot=this.hasSlotController.test("items"))}get _linkTone(){return"neutral"===this.tone?"neutral":"fixed-light"}render(){return te`
       <footer class="footer">
         <section
           class="${Ke({"footer-top":this.hasDefaultSlot||this.hasTitleSlot||this.hasDescriptionSlot||this.hasItemsSlot,"has-content":this.hasDefaultSlot||this.hasItemsSlot,"sgds-container":"default"===this.layout,"sgds-container-sidebar":"sidebar"===this.layout})}"
@@ -4082,7 +4082,7 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
       <slot
         class=${Ke({"tab-panel":!0,"tab-panel--active":this.active})}
       ></slot>
-    `}}qd.styles=[...He.styles,Nd],t([Ve({reflect:!0})],qd.prototype,"name",void 0),t([Ve({type:Boolean,reflect:!0})],qd.prototype,"active",void 0),t([nt("active")],qd.prototype,"_handleActiveChange",null);var Yd=r`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{font-weight:var(--sgds-font-weight-semibold);text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{display:table;table-layout:auto;width:100%}:host([layout=fixed]) .table{table-layout:fixed}.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}}`;const jd="table-header-background";class Wd extends He{constructor(){super(...arguments),this.rowHeader=[],this.columnHeader=[],this.tableData=[],this.headerPosition="horizontal",this.headerBackground=!1,this.tableBorder=!1,this.layout="auto",this.hasDefaultSlot=!1,this._headerBackground=!1,this.hasSlotController=new Hi(this,"[default]")}connectedCallback(){super.connectedCallback()}updated(){this.hasDefaultSlot||(this.hasDefaultSlot=this.hasSlotController.test("[default]")),this._headerBackground=this.headerBackground}_renderTable(){if("horizontal"===this.headerPosition)return te`
+    `}}qd.styles=[...He.styles,Nd],t([Ve({reflect:!0})],qd.prototype,"name",void 0),t([Ve({type:Boolean,reflect:!0})],qd.prototype,"active",void 0),t([nt("active")],qd.prototype,"_handleActiveChange",null);var Yd=r`tbody,td,th,thead,tr{border:var(--sgds-border-width-0) solid;border-color:inherit}th{font-weight:var(--sgds-font-weight-semibold);text-align:-webkit-match-parent}table{border-collapse:collapse;caption-side:bottom}.table{display:table;table-layout:auto;width:100%}:host([layout=fixed]) .table{table-layout:fixed}.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}}`;const jd="table-header-background";class Wd extends He{constructor(){super(...arguments),this.rowHeader=[],this.columnHeader=[],this.tableData=[],this.headerPosition="horizontal",this.headerBackground=!1,this.tableBorder=!1,this.layout="auto",this.hasDefaultSlot=!1,this._headerBackground=!1,this.hasSlotController=new Hi(this,"[default]")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","table")}updated(){this.hasDefaultSlot||(this.hasDefaultSlot=this.hasSlotController.test("[default]")),this._headerBackground=this.headerBackground}_renderTable(){if("horizontal"===this.headerPosition)return te`
         <thead>
           <tr>
             ${this.rowHeader.map(e=>te` <th><div>${e}</div></th> `)}
@@ -4119,16 +4119,15 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
           `)}
       `}}render(){return te`
       <div
+        role="rowgroup"
         class=${Ke({"table-responsive":"always"===this.responsive,"table-responsive-sm":"sm"===this.responsive,"table-responsive-md":"md"===this.responsive,"table-responsive-lg":"lg"===this.responsive,"table-responsive-xl":"xl"===this.responsive})}
         tabindex="0"
       >
-        <div role="table">
-          <slot id="table-slot" class=${Ke({table:!0,"no-border":!this.hasDefaultSlot})}></slot>
+        <slot id="table-slot" class=${Ke({table:!0,"no-border":!this.hasDefaultSlot})}></slot>
 
-          ${this.hasDefaultSlot?"":te`<table class="table">
-                ${this._renderTable()}
-              </table>`}
-        </div>
+        ${this.hasDefaultSlot?"":te`<table class="table">
+              ${this._renderTable()}
+            </table>`}
       </div>
     `}}Wd.styles=[...He.styles,Yd],t([Ve({type:String,reflect:!0})],Wd.prototype,"responsive",void 0),t([Ve({type:Array})],Wd.prototype,"rowHeader",void 0),t([Ve({type:Array})],Wd.prototype,"columnHeader",void 0),t([Ve({type:Array})],Wd.prototype,"tableData",void 0),t([Ve({type:String,reflect:!0})],Wd.prototype,"headerPosition",void 0),t([Ve({type:Boolean,reflect:!0})],Wd.prototype,"headerBackground",void 0),t([Ve({type:Boolean,reflect:!0})],Wd.prototype,"tableBorder",void 0),t([Ve({type:String,reflect:!0})],Wd.prototype,"layout",void 0),t([Ve({type:Boolean})],Wd.prototype,"hasDefaultSlot",void 0),t([kl({context:jd}),Ee()],Wd.prototype,"_headerBackground",void 0);var Kd=r`: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)}`;class Gd extends He{connectedCallback(){super.connectedCallback(),this.setAttribute("role","cell")}render(){return te`<div class="table-cell"><slot></slot></div>`}}Gd.styles=[...He.styles,Kd];var Xd=r`: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:var(--sgds-font-weight-semibold);min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;class Qd extends He{constructor(){super(...arguments),this._headerBackground=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","columnheader")}_handleHeaderBackground(){this._headerBackground?this.setAttribute("headerBackground","true"):this.removeAttribute("headerBackground")}render(){return te`<div
       class=${Ke({"table-head":!0,"header-background":this._headerBackground})}