@sellmate/design-system 1.0.76 → 1.0.77

package/dist/collection/components/sd-switch/sd-switch.js

@@ -40,7 +40,7 @@ export class SdSwitch {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '469c012285d3c8a33792a460e74d8566c384efe8', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '9678e3325339a47e3e2d81ce3cd752c86ed0f906', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '47348914869f5215957a652cfcf3a11807a0216f', class: "sd-switch__track" }, h("div", { key: '0676260c42e6b79acec710f0f9ba72f01a3a7c18', class: "sd-switch__knob" })), this.label && h("span", { key: 'b92597092795bff38d2acf0cff76f9c381435438', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-table.config.js

@@ -0,0 +1,81 @@
+import tableTokens from "../../tokens/generated/component.table.json";
+import systemTokens from "../../tokens/generated/system.json";
+// ── Header Tokens ──
+export const TABLE_HEADER_LAYOUT = {
+    height: tableTokens.table.header.height,
+    paddingX: tableTokens.table.header.paddingX,
+    gap: tableTokens.table.header.gap,
+};
+export const TABLE_HEADER_TYPOGRAPHY = {
+    fontFamily: tableTokens.table.header.typography.fontFamily,
+    fontWeight: tableTokens.table.header.typography.fontWeight,
+    fontSize: tableTokens.table.header.typography.fontSize,
+    lineHeight: tableTokens.table.header.typography.lineHeight,
+    textDecoration: tableTokens.table.header.typography.textDecoration,
+};
+export const TABLE_HEADER_COLORS = {
+    bg: tableTokens.table.header.bg,
+};
+export const TABLE_HEADER_RESIZING_BAR = {
+    color: tableTokens.table.header.resizingBar.color,
+    height: tableTokens.table.header.resizingBar.height,
+};
+// ── Body Tokens ──
+export const TABLE_BODY_LAYOUT = {
+    default: {
+        height: tableTokens.table.body.default.height,
+        paddingY: tableTokens.table.body.default.paddingY,
+    },
+    dense: {
+        height: tableTokens.table.body.dense.height,
+        paddingY: tableTokens.table.body.dense.paddingY,
+    },
+    paddingX: tableTokens.table.body.paddingX,
+    framePadding: tableTokens.table.body.frame.padding,
+};
+export const TABLE_BODY_TYPOGRAPHY = {
+    fontFamily: tableTokens.table.body.typography.fontFamily,
+    fontWeight: tableTokens.table.body.typography.fontWeight,
+    fontSize: tableTokens.table.body.typography.fontSize,
+    lineHeight: tableTokens.table.body.typography.lineHeight,
+    textDecoration: tableTokens.table.body.typography.textDecoration,
+};
+// ── Frame / Border Tokens ──
+export const TABLE_BORDER = {
+    color: tableTokens.table.border.default,
+    width: tableTokens.table.border.width.width,
+};
+export const TABLE_RADIUS = tableTokens.table.radius;
+// ── Content Tokens ──
+export const TABLE_CONTENT = {
+    gap: tableTokens.table.content.gap,
+};
+// ── Bar Tokens ──
+export const TABLE_BAR_LAYOUT = {
+    height: tableTokens.table.bar.height,
+    sectionGap: tableTokens.table.bar.section.gap,
+    dividerHeight: tableTokens.table.bar.divider.height,
+};
+export const TABLE_BAR_COLORS = {
+    count: {
+        total: tableTokens.table.bar.count.total,
+        null: tableTokens.table.bar.count.null,
+    },
+};
+// ── KeyValue Tokens ──
+export const TABLE_KEY_VALUE = {
+    bodyPadding: tableTokens.table.keyValue.body.padding,
+    // TODO: 오타 수정 요청 후 변경
+    height: tableTokens.table.keyVlaue.height,
+};
+// ── Header Icon Color Defaults ──
+const ICON_DEFAULT_COLOR = {
+    pageEdit: systemTokens.color.darkblue.strong,
+    arrowDown: systemTokens.color.darkblue.strong,
+    arrowUp: systemTokens.color.darkblue.strong,
+    updown: systemTokens.color.grey.strong,
+    pageMove: systemTokens.color.darkblue.strong,
+    star: systemTokens.color.blue.strong,
+};
+export const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
+export const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';

package/dist/collection/components/sd-table/sd-table.css

@@ -24,12 +24,12 @@ sd-table *,
   width: 100%;
   min-width: 0;
   height: var(--table-container-height, 400px);
-  border: 1px solid #E1E1E1;
-  border-radius: 8px;
+  border: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
+  border-radius: var(--table-radius, 8px);
   overflow: hidden;
 }
 .sd-table__clip--has-pagination {
-  border-radius: 8px 8px 0 0;
+  border-radius: var(--table-radius, 8px) var(--table-radius, 8px) 0 0;
 }
 
 .sd-table__wrapper {
@@ -38,7 +38,11 @@ sd-table *,
   display: flex;
   flex-direction: column;
   position: relative;
-  font-size: 12px;
+  font-family: var(--table-body-font-family, inherit);
+  font-weight: var(--table-body-font-weight, 400);
+  font-size: var(--table-body-font-size, 12px);
+  line-height: var(--table-body-line-height, 20px);
+  text-decoration: var(--table-body-text-decoration, none);
   overflow: auto;
   background: #FFFFFF;
 }
@@ -57,12 +61,16 @@ sd-table *,
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--table-body-font-size, 12px);
   color: #888888;
   pointer-events: none;
   z-index: 200;
   background: rgba(255, 255, 255, 0.6);
 }
+.sd-table__no-data ::slotted(*),
+.sd-table__no-data span {
+  pointer-events: auto;
+}
 
 .sd-table__loading {
   position: absolute;
@@ -121,11 +129,11 @@ sd-table *,
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #E1E1E1;
+  border: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   border-top: none;
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 var(--table-radius, 8px) var(--table-radius, 8px);
 }
-.sd-table__pagination sd-select-v2 {
+.sd-table__pagination sd-select {
   position: absolute;
   right: 10px;
   top: 50%;

package/dist/collection/components/sd-table/sd-table.js

@@ -1,6 +1,7 @@
 import { h, Host, readTask, forceUpdate, } from "@stencil/core";
 import { nanoid } from "nanoid";
 import { TABLE_ID_ATTR, } from "./constants";
+import { TABLE_RADIUS, TABLE_BORDER, TABLE_BODY_TYPOGRAPHY } from "./sd-table.config";
 export class SdTable {
     static DEFAULT_NO_DATA_LABEL = '데이터가 없습니다.';
     el;
@@ -615,12 +616,10 @@ export class SdTable {
         const allRows = this.rows ?? [];
         const pageInfo = this.getPaginationInfoSync();
         const startIdx = pageInfo?.startIndex ?? 0;
-        const displayed = pageInfo
-            ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex)
-            : allRows;
+        const displayed = pageInfo ? allRows.slice(pageInfo.startIndex, pageInfo.endIndex) : allRows;
         return displayed.map((row, i) => {
             const absoluteIdx = startIdx + i;
-            return (h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
+            return h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
         });
     }
     get tableClasses() {
@@ -642,24 +641,34 @@ export class SdTable {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (h(Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, h("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
+        const hostStyle = {
+            '--table-radius': `${TABLE_RADIUS}px`,
+            '--table-border-color': TABLE_BORDER.color,
+            '--table-border-width': `${TABLE_BORDER.width}px`,
+            '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
+            '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
+            '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
+            '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
+            '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
+        };
+        return (h(Host, { key: '1a80b7c3589a8a2eefaabf24ed895c927543aac4', style: hostStyle }, h("div", { key: 'd97aa6c04948153671e26066b6df02e206fc35e6', class: "sd-table__container", style: {
                 '--table-width': this.width,
                 '--table-height': this.height,
                 '--table-container-height': `calc(${this.height || '100%'} - ${this.pagination && this.rowCount > 0 && !this.useVirtualScroll ? 48 : 0}px)`,
-            } }, h("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
+            } }, h("div", { key: '0e13dbbe062953c93a0acaaf5c00ca40a5b7e245', class: {
                 'sd-table__clip': true,
                 'sd-table__clip--has-pagination': !!(this.pagination &&
                     this.pagination.rowsPerPage > 0 &&
                     this.rowCount > 0 &&
                     !this.useVirtualScroll),
-            } }, h("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
+            } }, h("div", { key: 'c800ecac543d1540d9b6c9faf06753c9dc10aaf3', class: {
                 'sd-table__wrapper': true,
                 'sd-table__wrapper--loading': this.isLoading,
                 'sd-table__wrapper--no-data': this.rowCount === 0 && !this.isLoading,
-            } }, this.isLoading && (h("div", { key: '35a237d0203b2479dbdb77ac42c918a9375bdfd3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '21a29981c1cdbd679f46abd2e7de7794c9ebbca9', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '07ad28bc6e7556cfe229fc1e952410f388424a7f', class: "sd-table__no-data" }, h("slot", { key: 'bf21e60f5b86614587b704bea2965b9467c7f467', name: "no-data" }, h("span", { key: 'f3d012d12e9189545b0cef52250502d46cb9a764' }, this.resolvedNoDataLabel)))), h("table", { key: '655d3dc017c6445ec454faef0e5e9837b7ee0013', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, this.isLoading && (h("div", { key: '656bc53538c8513e014f31f1e976fd66ce79c7aa', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '74078add6860fc95e238d89335d57e205e751cd6', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '18a33a7247bde3d08472f8082325c76217734e5d', class: "sd-table__no-data" }, h("slot", { key: '966cb066f721695013a3e5a1a64543544b09fa77', name: "no-data" }, h("span", { key: 'd335a9b1b2e847b267cefb9d12f7265c5f67f394' }, this.resolvedNoDataLabel)))), h("table", { key: '8fd0a2428bfd4dd6a574bbb02139088c31408866', class: this.tableClasses }, this.autoThead ? (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, h("sd-thead", { rows: this.rows ?? [] }))) : (h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (h("div", { key: '7ab0b30a0c0e0a197b0f79c6b07ef5614d5d2879', class: "sd-table__pagination" }, h("sd-pagination", { key: '71d44bba5a82f4d8f7c067e525db15fe9a36c305', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select-v2", { key: 'a9ab33347db0714da188f658a2ca1902502db690', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: '6f483b1a23456bbe42ff769a50c9de5638e7754f', class: "sd-table__pagination" }, h("sd-pagination", { key: '841c545c23de8b4bba4cce3c9f6608d16f7b4e54', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onSdPageChange: (e) => this.changePage(e.detail) }), this.useRowsPerPageSelect && (h("sd-select", { key: 'a67e17bf3067953169ffa119ee41b1d7f46c2058', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.css

@@ -7,12 +7,4 @@
 
 .tbody {
   display: table-row-group;
-}
-.tbody--empty .tbody__no-data-row {
-  display: table-row;
-}
-.tbody--empty .tbody__no-data-cell {
-  display: table-cell;
-  padding: 0;
-  border-bottom: none;
 }

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -45,12 +45,11 @@ export class SdTbody {
         }
     }
     render() {
-        const hasRows = this.rows.length > 0;
-        return (h(Host, { key: 'bc9fbd4f08f4d77da60b083dceef4e24e2fb5532', slot: `${this.tableId}-body` }, h("tbody", { key: '81ef875cbc39f988021a211ede716a98d3ea30cd', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (h(Host, { key: 'e474bc09fdec9d48d978ec87620b161220b5236c', slot: `${this.tableId}-body` }, h("tbody", { key: 'c74261b3f30c43e8ac8c3bdea1180f17bfc7dbc8', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", null),
+            h("slot", { key: 'f686e7e8fa81e725a32592a58267d0b5cd7551e6' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
-        ]) : (h("tr", { class: "tbody__no-data-row" }, h("td", { class: "tbody__no-data-cell", colSpan: 100 }, h("slot", { name: "no-data" })))))));
+        ])));
     }
     static get is() { return "sd-tbody"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -80,7 +80,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
+        return (h(Host, { key: '1702396f538453cf26beb81b63926ea73b7baa89', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'bd04afefd83178f48eb93b4e7d189386a817ff72' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-thead/sd-thead.css

@@ -7,7 +7,7 @@ sd-thead * {
 
 .thead {
   display: table-header-group;
-  height: 36px;
+  height: var(--table-header-height, 36px);
 }
 .thead--sticky {
   position: sticky;
@@ -22,12 +22,16 @@ sd-thead * {
 
 .th {
   display: table-cell;
-  background: #F5FAFF;
-  height: 36px;
-  padding: 0 16px;
-  font-weight: 500;
+  background: var(--table-header-bg, #F5FAFF);
+  height: var(--table-header-height, 36px);
+  padding: 0 var(--table-header-padding-x, 16px);
+  font-family: var(--table-header-font-family, inherit);
+  font-weight: var(--table-header-font-weight, 500);
+  font-size: var(--table-header-font-size, 12px);
+  line-height: var(--table-header-line-height, 20px);
+  text-decoration: var(--table-header-text-decoration, none);
   vertical-align: middle;
-  border-bottom: 1px solid #E1E1E1;
+  border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   -webkit-user-select: none;
   user-select: none;
   position: relative;
@@ -54,13 +58,13 @@ sd-thead * {
 }
 .th.sticky-left {
   position: sticky;
-  background-color: #F5FAFF;
+  background-color: var(--table-header-bg, #F5FAFF);
   z-index: 110 !important;
   left: var(--sticky-left-offset, 0);
 }
 .th.sticky-right {
   position: sticky;
-  background-color: #F5FAFF;
+  background-color: var(--table-header-bg, #F5FAFF);
   z-index: 110 !important;
   right: var(--sticky-right-offset, 0);
 }
@@ -112,7 +116,7 @@ sd-thead * {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  gap: 4px;
+  gap: var(--table-header-gap, 4px);
 }
 .th__content--left {
   justify-content: flex-start;
@@ -135,11 +139,11 @@ sd-thead * {
   right: 0;
   transform: translateY(-50%);
   width: 4px;
-  height: 16px;
+  height: var(--table-header-resizer-height, 16px);
   cursor: col-resize;
   z-index: 3;
-  border-left: 1px solid #CCCCCC;
-  border-right: 1px solid #CCCCCC;
+  border-left: var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);
+  border-right: var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);
 }
 .th__resizer--left {
   right: auto;

package/dist/collection/components/sd-table/sd-thead/sd-thead.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { TABLE_ID_ATTR, } from "../constants";
+import { resolveTableIconColor, resolveSortIconName, TABLE_HEADER_LAYOUT, TABLE_HEADER_TYPOGRAPHY, TABLE_HEADER_COLORS, TABLE_HEADER_RESIZING_BAR, TABLE_BORDER, } from "../sd-table.config";
 export class SdThead {
     el;
     columns;
@@ -11,6 +12,7 @@ export class SdThead {
     scrolledRight;
     rows = [];
     columnWidths = [];
+    sdColumnSort;
     tableId = '';
     _columns = [];
     _selectable = false;
@@ -111,9 +113,11 @@ export class SdThead {
             this.tableEl.handleResize(index, event, reversed);
         }
     }
+    handleColumnSort = (col) => {
+        this.sdColumnSort.emit({ column: col });
+    };
     handleSelectAll(checked) {
-        const currentState = this.getIsAllChecked();
-        const nextChecked = currentState === null ? false : !!checked;
+        const nextChecked = !!checked;
         const safeRows = Array.isArray(this.rows) ? this.rows : [];
         if (this.tableEl?.toggleSelectAllSync) {
             this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
@@ -133,27 +137,42 @@ export class SdThead {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: '5aa1e38311b542d1a0b05b55abc7ef41927508bd', slot: `${this.tableId}-head` }, h("thead", { key: '6d17753988ecd02d900d8a3bd7f2115b534b68a7', class: {
+        const headStyle = {
+            '--table-header-height': `${TABLE_HEADER_LAYOUT.height}px`,
+            '--table-header-padding-x': `${TABLE_HEADER_LAYOUT.paddingX}px`,
+            '--table-header-gap': `${TABLE_HEADER_LAYOUT.gap}px`,
+            '--table-header-bg': TABLE_HEADER_COLORS.bg,
+            '--table-header-font-family': TABLE_HEADER_TYPOGRAPHY.fontFamily,
+            '--table-header-font-weight': TABLE_HEADER_TYPOGRAPHY.fontWeight,
+            '--table-header-font-size': `${TABLE_HEADER_TYPOGRAPHY.fontSize}px`,
+            '--table-header-line-height': `${TABLE_HEADER_TYPOGRAPHY.lineHeight}px`,
+            '--table-header-text-decoration': TABLE_HEADER_TYPOGRAPHY.textDecoration,
+            '--table-header-resizer-color': TABLE_HEADER_RESIZING_BAR.color,
+            '--table-header-resizer-height': `${TABLE_HEADER_RESIZING_BAR.height}px`,
+            '--table-border-color': TABLE_BORDER.color,
+            '--table-border-width': `${TABLE_BORDER.width}px`,
+        };
+        return (h(Host, { key: 'c4468056cc20a78516e61bccaf4d11c098e83ec6', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'a9befd1728baf2104bfb9132557d5c5c0eb49748', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '9cc729603e126da2f9c8923fe29ece10c7750bb4', class: "tr" }, this._selectable && (h("th", { key: '37b2bcfa77eaf4c44465684c49ae84d566acc18b', class: {
+            } }, h("tr", { key: 'da786d82d4896b6124becf42f634bcc5b0a6ffb7', class: "tr" }, this._selectable && (h("th", { key: 'b257c5475b7e528fbfc52ea85031a4c49bed7b36', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '4284894821640ee1bdbd12b1759efb01e6c06488', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '6624026c1811c809eeb5131518ddb8c11f66b541', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             return (h("th", { key: col.name, class: {
                     th: true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
         }), stickyRightCols.map((col, relativeIdx) => {
             const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
             return (h("th", { key: col.name, class: {
@@ -162,7 +181,7 @@ export class SdThead {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
         })))));
     }
     static get is() { return "sd-thead"; }
@@ -378,6 +397,31 @@ export class SdThead {
             "_scrolledRight": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "sdColumnSort",
+                "name": "sdColumnSort",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ column: SdTableColumn }",
+                    "resolved": "{ column: SdTableColumn; }",
+                    "references": {
+                        "SdTableColumn": {
+                            "location": "import",
+                            "path": "../constants",
+                            "id": "src/components/sd-table/constants.ts::SdTableColumn",
+                            "referenceLocation": "SdTableColumn"
+                        }
+                    }
+                }
+            }];
+    }
     static get methods() {
         return {
             "refreshConfig": {

package/dist/collection/components/sd-table/sd-tr/sd-tr.css

@@ -17,9 +17,9 @@ sd-tr * {
 
 .td {
   display: table-cell;
-  height: 44px;
-  padding: 0 16px;
-  border-bottom: 1px solid #E1E1E1;
+  height: var(--table-body-height, 44px);
+  padding: 0 var(--table-body-padding-x, 16px);
+  border-bottom: var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);
   background: white;
   vertical-align: middle;
   overflow: hidden;

package/dist/collection/components/sd-table/sd-tr/sd-tr.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { TABLE_ID_ATTR, } from "../constants";
+import { TABLE_BODY_LAYOUT, TABLE_BODY_TYPOGRAPHY, TABLE_BORDER, } from "../sd-table.config";
 export class SdTr {
     el;
     columns;
@@ -144,13 +145,25 @@ export class SdTr {
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
         const hasRowspan = this.tableEl?.hasRowspanSync?.() ?? false;
-        return (h(Host, { key: 'e8d387043d3384daffb5d548176b469a91264225', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '1d579819497a6186941b0c80c916a83c48dfcc0d', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { key: '1a8ab44a8c65926eb9a7bd9e9224d0eed55ecfb1', class: {
+        const rowStyle = {
+            display: this.isVisible ? '' : 'none',
+            '--table-body-height': `${TABLE_BODY_LAYOUT.default.height}px`,
+            '--table-body-padding-x': `${TABLE_BODY_LAYOUT.paddingX}px`,
+            '--table-body-font-family': TABLE_BODY_TYPOGRAPHY.fontFamily,
+            '--table-body-font-weight': TABLE_BODY_TYPOGRAPHY.fontWeight,
+            '--table-body-font-size': `${TABLE_BODY_TYPOGRAPHY.fontSize}px`,
+            '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
+            '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
+            '--table-border-color': TABLE_BORDER.color,
+            '--table-border-width': `${TABLE_BORDER.width}px`,
+        };
+        return (h(Host, { key: '33228ee9f020f915e77f9827e9360087fc2cd565', style: rowStyle }, h("tr", { key: '2f308a547ad19584e509543027cf60ff8faec2f8', class: { 'tr': true, 'tr--no-hover': hasRowspan } }, this._selectable && (h("td", { key: '94f50aa6fd31a63d8d99e8c6f25faf8ba6f68ddf', class: {
                 'td': true,
                 'td--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '72bdbadc76dcb0682eb4de496e9abda692a0ea7e', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'e8808068b601529c95b8055c16e7af8a746bdccc', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => {
             if (this.isCovered(idx))
                 return null;
             const span = this.getSpanFor(col);

package/dist/collection/components/sd-tabs/sd-tabs.js

@@ -67,7 +67,7 @@ export class SdTabs {
         };
     }
     render() {
-        return (h("div", { key: '3698b7b43e74ff053d61d5ce696b987373fd27d6', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));

package/dist/collection/components/sd-tag/sd-tag.js

@@ -19,7 +19,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
+        return (h("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -29,7 +29,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '32082536736e20074263632aa29f36bc7709db39', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '8da56711cb12127f96195404799581480280507f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -26,16 +26,16 @@ export class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
+        return (h("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '6f760b3c7e0adccd2aa08cb662cca90a3d3a227b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '3ff017970956d8e5cb72b4d6e26d33aaf0551e76', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '8332cbe3b2283ce866044e55804e35338569a38f', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '9d63aea3c45c4962e5766e7059a166a85e7a357f', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'dc73d60dd1e593c597a6b5dd977db380c21ff680', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '2b25dfb6ae2f857b674341427f93ee34e4691893', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-textarea/sd-textarea.js

@@ -105,7 +105,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: 'a77834af45e2ca7abaa019d18b6108a51f0cf4ae', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '2cbc8ef4febeab89eb336cb29d34abdbf9f2f080', class: "sd-textarea__content" }, h("textarea", { key: '3b09e30b4e42affc7f03fb8a354387b57e5ee0fe', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: 'ca7dc6c13d22ba43cd99ee1e976599d7efb1eceb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, h("textarea", { key: 'b7f8a55b7ee4dfc394c380a97e21c6cc34d12b9b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-toast/sd-toast.js

@@ -11,10 +11,10 @@ export class SdToast {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
+        return (h("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: '73c792f19982140f91397a3ec7d6e22914ca316f', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'cc140bfd043b0d0cd6a7697053f736dac707f86b', class: "sd-toast__icon" }, h("sd-icon", { key: '85f38036cd39cb4d0f4a43ef0d307ef9faa03eb1', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '4d36e34a9ccac80fc2ed01f33b1e2aa80d70c78b', class: "sd-toast__content" }, h("span", { key: '9105d37004bbde90e8a7118ca5a58a6e4d6953f5', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'fdaabae7d8efb6540ce770cc5783b286789cdb3c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'c5985e50041b8f3e8c77e142fd06afaf0537de47', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '68362fac26744fc7e805a18c589f4aff5845edc1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '8ec7941b469b6d0242ab68b7928a9dbf6e75bb5f', class: "sd-toast__icon" }, h("sd-icon", { key: 'c057a100de91cecc3435bfa6a95c928727eb1836', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '21e84dd6cdf7efa52611da532a0983268c7c2cb2', class: "sd-toast__content" }, h("span", { key: '99c370fe3d4a54103fbccef395afadf2923f3613', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '3ce7109c2d1f5cd03f4fcc6bb01ede14c6400734', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: '2cf982fd1fe538533ceff61bbdecdacd2d69e51c', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get is() { return "sd-toast"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-toast-container/sd-toast-container.js

@@ -216,7 +216,7 @@ export class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/collection/components/sd-toggle/sd-toggle.js

@@ -45,7 +45,7 @@ export class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'e9bb126d92605cdd3a88ff1840aa79a4b66c7cf8', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '41c18a29c10ae91b84ecd6d2619a40ab99f5d151', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {