@govtechsg/sgds-web-component 3.19.0 → 3.19.1

package/components/Table/sgds-table.js

@@ -168,16 +168,16 @@ __decorate([
     property({ type: Array })
 ], SgdsTable.prototype, "tableData", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SgdsTable.prototype, "headerPosition", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SgdsTable.prototype, "headerBackground", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], SgdsTable.prototype, "tableBorder", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SgdsTable.prototype, "layout", void 0);
 __decorate([
     property({ type: Boolean })

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 }) 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   * 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 }) 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  }\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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"}

package/components/index.umd.min.js

@@ -2322,7 +2322,7 @@ const lt=Symbol.for(""),dt=e=>{if(e?.r===lt)return e?._$litStatic$},ct=(e,...t)=
       clip-rule="evenodd"
     />
   </svg>
-`};var Zt=r`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class Bt extends He{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=It[e];if(t)return t;console.warn(`Icon not found: ${e}`)}render(){const e=this._getIconByName(this.name);return e||ae}}Bt.styles=[...He.styles,Zt],t([Ve({type:String,reflect:!0})],Bt.prototype,"name",void 0),t([Ve({type:String,reflect:!0})],Bt.prototype,"size",void 0);var Lt=r`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-warning-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-emphasis)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted)}:host([outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-primary-color-fixed-dark)}:host([variant=success][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-success-color-fixed-dark)}:host([variant=warning][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-warning-color-fixed-light)}:host([variant=danger][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-danger-color-fixed-dark)}:host([variant=neutral][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-color-fixed-dark)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);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-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg);position:relative}.alert.outlined{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-md);padding-right:var(--sgds-padding-2-xl)}.alert-content__upper{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.alert-title{font-size:var(--sgds-font-size-subtitle-sm);font-style:normal;font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(*){font-size:var(--sgds-font-size-body-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert sgds-close-button{position:absolute;right:14px;top:14px}`;class Tt extends He{constructor(){super(...arguments),this.show=!1,this.dismissible=!1,this.variant="info",this.outlined=!1,this.title=""}close(){this.show=!1}_handleShowChange(){this.show?this.emit("sgds-show"):this.emit("sgds-hide")}render(){return this.dismissible&&this.show||!this.dismissible?ut`
+`};var Zt=r`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class Bt extends He{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=It[e];if(t)return t;console.warn(`Icon not found: ${e}`)}render(){const e=this._getIconByName(this.name);return e||ae}}Bt.styles=[...He.styles,Zt],t([Ve({type:String,reflect:!0})],Bt.prototype,"name",void 0),t([Ve({type:String,reflect:!0})],Bt.prototype,"size",void 0);var Lt=r`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-emphasis)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted)}:host([outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-primary-color-fixed-dark)}:host([variant=success][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-success-color-fixed-dark)}:host([variant=warning][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-warning-color-fixed-light)}:host([variant=danger][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-danger-color-fixed-dark)}:host([variant=neutral][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-color-fixed-dark)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);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-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg);position:relative}.alert.outlined{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-md);padding-right:var(--sgds-padding-2-xl)}.alert-content__upper{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.alert-title{font-size:var(--sgds-font-size-subtitle-sm);font-style:normal;font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(*){font-size:var(--sgds-font-size-body-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert sgds-close-button{position:absolute;right:14px;top:14px}`;class Tt extends He{constructor(){super(...arguments),this.show=!1,this.dismissible=!1,this.variant="info",this.outlined=!1,this.title=""}close(){this.show=!1}_handleShowChange(){this.show?this.emit("sgds-show"):this.emit("sgds-hide")}render(){return this.dismissible&&this.show||!this.dismissible?ut`
           <div
             class="${Ke({alert:!0,show:this.show,"alert-dismissible":this.dismissible,outlined:this.outlined})}"
             role="alert"
@@ -3434,7 +3434,7 @@ class bl{constructor(e,t,s,i){if(this.subscribe=!1,this.provided=!1,this.value=v
           </div>
         </div>
       </div>
-    `}}function Hl(e){const t=e.tagName.toLowerCase();return"-1"!==e.getAttribute("tabindex")&&(!e.hasAttribute("disabled")&&((!e.hasAttribute("aria-disabled")||"false"===e.getAttribute("aria-disabled"))&&(!("input"===t&&"radio"===e.getAttribute("type")&&!e.hasAttribute("checked"))&&(null!==e.offsetParent&&("hidden"!==window.getComputedStyle(e).visibility&&(!("audio"!==t&&"video"!==t||!e.hasAttribute("controls"))||(!!e.hasAttribute("tabindex")||(!(!e.hasAttribute("contenteditable")||"false"===e.getAttribute("contenteditable"))||["button","input","select","textarea","a","audio","video","summary"].includes(t)))))))))}Pl.styles=[...He.styles,Fl,Ht,Tl],t([Ve({type:Boolean,reflect:!0})],Pl.prototype,"fluid",void 0),t([Ee()],Pl.prototype,"toggleVisibility",void 0);let zl=[];class Rl{constructor(e){this.tabDirection="forward",this.element=e,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this)}activate(){zl.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keyup",this.handleKeyUp)}deactivate(){zl=zl.filter(e=>e!==this.element),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keyup",this.handleKeyUp)}isActive(){return zl[zl.length-1]===this.element}checkFocus(){if(this.isActive()&&!this.element.matches(":focus-within")){const{start:e,end:t}=function(e){var t,s;const i=[];return function e(t){t instanceof HTMLElement&&(i.push(t),null!==t.shadowRoot&&"open"===t.shadowRoot.mode&&e(t.shadowRoot)),[...t.children].forEach(t=>e(t))}(e),{start:null!==(t=i.find(e=>Hl(e)))&&void 0!==t?t:null,end:null!==(s=i.reverse().find(e=>Hl(e)))&&void 0!==s?s:null}}(this.element),s="forward"===this.tabDirection?e:t;"function"==typeof(null==s?void 0:s.focus)&&s.focus({preventScroll:!0})}}handleFocusIn(){this.checkFocus()}handleKeyDown(e){"Tab"===e.key&&e.shiftKey&&(this.tabDirection="backward",requestAnimationFrame(()=>this.checkFocus()))}handleKeyUp(){this.tabDirection="forward"}}var Ol=r`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-24)!important;gap:1rem;line-height:var(--sgds-line-height-40)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-24);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;class Nl extends He{constructor(){super(...arguments),this.hasSlotController=new Hi(this,"footer"),this.open=!1,this.noAnimation=!1,this.size="md",this.hasFooterSlot=!1,this.noCloseButton=!1}connectedCallback(){super.connectedCallback(),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.modal=new Rl(this),this._resizeHandler=this._debounce(this._onWindowResize.bind(this),200)}disconnectedCallback(){super.disconnectedCallback(),this._removeResizeListener(),tl(this)}firstUpdated(e){super.firstUpdated(e),this._onWindowResize(),this.dialog.hidden=!this.open,this.open&&(this.addOpenListeners(),this.modal.activate(),el(this))}updated(){this.hasFooterSlot||(this.hasFooterSlot=this.hasSlotController.test("footer"))}_debounce(e,t){let s;return(...i)=>{clearTimeout(s),s=window.setTimeout(()=>e(...i),t)}}_onWindowResize(){const e=this.panel.getBoundingClientRect().width,t=this.querySelectorAll("sgds-button[slot='footer']");this.panel&&(t.length<=1||(e<512||"fullscreen"===this.size&&e<Sl?t.forEach(e=>{e.fullWidth=!0}):t.forEach(e=>{e.fullWidth=!1})))}_addResizeListener(){window.addEventListener("resize",this._resizeHandler)}_removeResizeListener(){window.removeEventListener("resize",this._resizeHandler)}async show(){if(!this.open)return this.open=!0,at(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,at(this,"sgds-after-hide")}requestClose(e){if(this.emit("sgds-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=st(this,"modal.denyClose");return void Ge(this.panel,e.keyframes)}this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown(e){this.open&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}_overlayClickHandler(){"fullscreen"!==this.size&&this.requestClose("overlay")}async handleOpenChange(){if(this.open){this.emit("sgds-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.modal.activate(),el(this),await Promise.all([Je(this.dialog),Je(this.overlay)]),this.dialog.hidden=!1;const e=st(this,"modal.show"),t=st(this,"modal.overlay.show");!this.noAnimation&&await Promise.all([Ge(this.panel,e.keyframes,e.options),Ge(this.overlay,t.keyframes,t.options)]),this.emit("sgds-after-show"),this.heading.focus(),this._addResizeListener()}else{this.emit("sgds-hide"),this.removeOpenListeners(),this.modal.deactivate(),await Promise.all([Je(this.dialog),Je(this.overlay)]);const e=st(this,"modal.hide"),t=st(this,"modal.overlay.hide");!this.noAnimation&&await Promise.all([Ge(this.overlay,t.keyframes,t.options).then(()=>{this.overlay.hidden=!0}),Ge(this.panel,e.keyframes,e.options).then(()=>{this.panel.hidden=!0})]),this.dialog.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1,tl(this);const s=this.originalTrigger;"function"==typeof(null==s?void 0:s.focus)&&setTimeout(()=>s.focus()),this.emit("sgds-after-hide"),this._removeResizeListener()}}render(){return te`
+    `}}function Hl(e){const t=e.tagName.toLowerCase();return"-1"!==e.getAttribute("tabindex")&&(!e.hasAttribute("disabled")&&((!e.hasAttribute("aria-disabled")||"false"===e.getAttribute("aria-disabled"))&&(!("input"===t&&"radio"===e.getAttribute("type")&&!e.hasAttribute("checked"))&&(null!==e.offsetParent&&("hidden"!==window.getComputedStyle(e).visibility&&(!("audio"!==t&&"video"!==t||!e.hasAttribute("controls"))||(!!e.hasAttribute("tabindex")||(!(!e.hasAttribute("contenteditable")||"false"===e.getAttribute("contenteditable"))||["button","input","select","textarea","a","audio","video","summary"].includes(t)))))))))}Pl.styles=[...He.styles,Fl,Ht,Tl],t([Ve({type:Boolean,reflect:!0})],Pl.prototype,"fluid",void 0),t([Ee()],Pl.prototype,"toggleVisibility",void 0);let zl=[];class Rl{constructor(e){this.tabDirection="forward",this.element=e,this.handleFocusIn=this.handleFocusIn.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this)}activate(){zl.push(this.element),document.addEventListener("focusin",this.handleFocusIn),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keyup",this.handleKeyUp)}deactivate(){zl=zl.filter(e=>e!==this.element),document.removeEventListener("focusin",this.handleFocusIn),document.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keyup",this.handleKeyUp)}isActive(){return zl[zl.length-1]===this.element}checkFocus(){if(this.isActive()&&!this.element.matches(":focus-within")){const{start:e,end:t}=function(e){var t,s;const i=[];return function e(t){t instanceof HTMLElement&&(i.push(t),null!==t.shadowRoot&&"open"===t.shadowRoot.mode&&e(t.shadowRoot)),[...t.children].forEach(t=>e(t))}(e),{start:null!==(t=i.find(e=>Hl(e)))&&void 0!==t?t:null,end:null!==(s=i.reverse().find(e=>Hl(e)))&&void 0!==s?s:null}}(this.element),s="forward"===this.tabDirection?e:t;"function"==typeof(null==s?void 0:s.focus)&&s.focus({preventScroll:!0})}}handleFocusIn(){this.checkFocus()}handleKeyDown(e){"Tab"===e.key&&e.shiftKey&&(this.tabDirection="backward",requestAnimationFrame(()=>this.checkFocus()))}handleKeyUp(){this.tabDirection="forward"}}var Ol=r`:host(:not([size=fullscreen])) .modal-panel{background-color:var(--sgds-surface-default);max-width:var(--sgds-dimension-640);padding:var(--sgds-padding-xl)}:host([size=sm]) .modal-panel{max-width:var(--sgds-dimension-480)}:host([size=md]) .modal-panel{max-width:var(--sgds-dimension-640)}:host([size=lg]) .modal-panel{max-width:var(--sgds-dimension-800)}:host([size=xl]) .modal-panel{max-width:var(--sgds-dimension-1280)}:host([size=fullscreen]) .modal-overlay{background-color:var(--sgds-surface-default)}:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl) var(--sgds-margin-lg)}.modal{align-items:start;bottom:0;display:flex;font-family:var(--sgds-body-font-family);justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--sgds-z-index-modal)}.modal-panel{border-radius:var(--sgds-border-radius-md);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);margin:auto;max-height:calc(100% - var(--sgds-margin-xl) - var(--sgds-margin-xl));width:100%;z-index:2}.modal-panel:focus{outline:none}.modal-content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-2-xl);min-height:0;position:relative}.modal-header__close{position:absolute;right:calc(var(--sgds-padding-md)*-1);top:calc(var(--sgds-padding-md)*-1)}@media screen and (min-width:512px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-xl)}}@media screen and (min-width:768px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-2-xl);max-height:calc(100% - var(--sgds-margin-2-xl) - var(--sgds-margin-2-xl))}}@media screen and (min-width:1024px){:host([size=fullscreen]) .modal-panel{margin:var(--sgds-margin-4-xl) var(--sgds-margin-lg);max-height:calc(100% - var(--sgds-margin-4-xl) - var(--sgds-margin-4-xl));max-width:var(--sgds-dimension-888)}}@media screen and (min-width:1280px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1168)}}@media screen and (min-width:1440px){:host([size=fullscreen]) .modal-panel{max-width:var(--sgds-dimension-1312)}}.modal.show .modal-panel{opacity:1;transform:none}.modal-header{display:flex;flex:0 0 auto;flex-direction:row;justify-content:space-between;max-width:var(--sgds-dimension-872)}.modal-header__title-description{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}:host([size=fullscreen]) .modal-header__title-description{gap:var(--sgds-gap-md)}slot[name=title]::slotted(*){align-items:center;display:flex;flex:1 1 auto;font-size:var(--sgds-font-size-24)!important;gap:1rem;line-height:var(--sgds-line-height-40)!important;margin:var(--sgds-margin-none)!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);line-height:var(--sgds-line-height-24);margin:var(--sgds-margin-none)!important}.modal-body{-webkit-overflow-scrolling:touch;flex:1 1 auto;overflow:auto}.modal-body slot::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none)}.modal-footer{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:var(--sgds-gap-md);justify-content:flex-end;padding-top:var(--sgds-padding-md)}.modal:not(.has-footer) .modal-footer{display:none}.modal-overlay{background-color:var(--sgds-bg-overlay);bottom:0;left:0;position:fixed;right:0;top:0}[hidden]{display:none}`;class Nl extends He{constructor(){super(...arguments),this.hasSlotController=new Hi(this,"footer"),this.open=!1,this.noAnimation=!1,this.size="md",this.hasFooterSlot=!1,this.noCloseButton=!1}connectedCallback(){super.connectedCallback(),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.modal=new Rl(this),this._resizeHandler=this._debounce(this._onWindowResize.bind(this),200)}disconnectedCallback(){super.disconnectedCallback(),this._removeResizeListener(),tl(this)}firstUpdated(e){super.firstUpdated(e),this._onWindowResize(),this.dialog.hidden=!this.open,this.open&&(this.addOpenListeners(),this.modal.activate(),el(this))}updated(){this.hasFooterSlot||(this.hasFooterSlot=this.hasSlotController.test("footer"))}_debounce(e,t){let s;return(...i)=>{clearTimeout(s),s=window.setTimeout(()=>e(...i),t)}}_onWindowResize(){const e=this.panel.getBoundingClientRect().width,t=this.querySelectorAll("sgds-button[slot='footer']");this.panel&&(t.length<=1||(e<512||"fullscreen"===this.size&&e<Sl?t.forEach(e=>{e.fullWidth=!0}):t.forEach(e=>{e.fullWidth=!1})))}_addResizeListener(){window.addEventListener("resize",this._resizeHandler)}_removeResizeListener(){window.removeEventListener("resize",this._resizeHandler)}async show(){if(!this.open)return this.open=!0,at(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,at(this,"sgds-after-hide")}requestClose(e){if(this.emit("sgds-close",{cancelable:!0,detail:{source:e}}).defaultPrevented){const e=st(this,"modal.denyClose");return void Ge(this.panel,e.keyframes)}this.hide()}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown(e){this.open&&"Escape"===e.key&&(e.stopPropagation(),this.requestClose("keyboard"))}_overlayClickHandler(){"fullscreen"!==this.size&&this.requestClose("overlay")}async handleOpenChange(){if(this.open){this.emit("sgds-show"),this.addOpenListeners(),this.originalTrigger=document.activeElement,this.modal.activate(),el(this),await Promise.all([Je(this.dialog),Je(this.overlay)]),this.dialog.hidden=!1;const e=st(this,"modal.show"),t=st(this,"modal.overlay.show");!this.noAnimation&&await Promise.all([Ge(this.panel,e.keyframes,e.options),Ge(this.overlay,t.keyframes,t.options)]),this.emit("sgds-after-show"),this.heading.focus(),this._addResizeListener()}else{this.emit("sgds-hide"),this.removeOpenListeners(),this.modal.deactivate(),await Promise.all([Je(this.dialog),Je(this.overlay)]);const e=st(this,"modal.hide"),t=st(this,"modal.overlay.hide");!this.noAnimation&&await Promise.all([Ge(this.overlay,t.keyframes,t.options).then(()=>{this.overlay.hidden=!0}),Ge(this.panel,e.keyframes,e.options).then(()=>{this.panel.hidden=!0})]),this.dialog.hidden=!0,this.overlay.hidden=!1,this.panel.hidden=!1,tl(this);const s=this.originalTrigger;"function"==typeof(null==s?void 0:s.focus)&&setTimeout(()=>s.focus()),this.emit("sgds-after-hide"),this._removeResizeListener()}}render(){return te`
       <div
         class=${Ke({modal:!0,show:this.open,"has-footer":this.hasFooterSlot})}
       >
@@ -4064,7 +4064,7 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
               </table>`}
         </div>
       </div>
-    `}}Yd.styles=[...He.styles,Ud],t([Ve({type:String,reflect:!0})],Yd.prototype,"responsive",void 0),t([Ve({type:Array})],Yd.prototype,"rowHeader",void 0),t([Ve({type:Array})],Yd.prototype,"columnHeader",void 0),t([Ve({type:Array})],Yd.prototype,"tableData",void 0),t([Ve({type:String})],Yd.prototype,"headerPosition",void 0),t([Ve({type:Boolean})],Yd.prototype,"headerBackground",void 0),t([Ve({type:Boolean})],Yd.prototype,"tableBorder",void 0),t([Ve({type:String})],Yd.prototype,"layout",void 0),t([Ve({type:Boolean})],Yd.prototype,"hasDefaultSlot",void 0),t([kl({context:qd}),Ee()],Yd.prototype,"_headerBackground",void 0);var jd=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 Wd extends He{connectedCallback(){super.connectedCallback(),this.setAttribute("role","cell")}render(){return te`<div class="table-cell"><slot></slot></div>`}}Wd.styles=[...He.styles,jd];var Kd=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 Gd 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
+    `}}Yd.styles=[...He.styles,Ud],t([Ve({type:String,reflect:!0})],Yd.prototype,"responsive",void 0),t([Ve({type:Array})],Yd.prototype,"rowHeader",void 0),t([Ve({type:Array})],Yd.prototype,"columnHeader",void 0),t([Ve({type:Array})],Yd.prototype,"tableData",void 0),t([Ve({type:String,reflect:!0})],Yd.prototype,"headerPosition",void 0),t([Ve({type:Boolean,reflect:!0})],Yd.prototype,"headerBackground",void 0),t([Ve({type:Boolean,reflect:!0})],Yd.prototype,"tableBorder",void 0),t([Ve({type:String,reflect:!0})],Yd.prototype,"layout",void 0),t([Ve({type:Boolean})],Yd.prototype,"hasDefaultSlot",void 0),t([kl({context:qd}),Ee()],Yd.prototype,"_headerBackground",void 0);var jd=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 Wd extends He{connectedCallback(){super.connectedCallback(),this.setAttribute("role","cell")}render(){return te`<div class="table-cell"><slot></slot></div>`}}Wd.styles=[...He.styles,jd];var Kd=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 Gd 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})}
     >
       <slot></slot>