@sellmate/design-system 1.0.78 → 1.1.0

package/dist/esm/{sd-table.config-Bj-EEo7N.js → sd-table.config-0Te8GLCI.js}

@@ -1,45 +1,5 @@
-import { s as systemTokens } from './system-CZ4ltUOw.js';
-
-const table = {
-	header: {
-		height: "36",
-		paddingX: "16",
-		gap: "4",
-		bg: "#F5FAFF",
-		typography: {
-			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
-			fontWeight: "500",
-			fontSize: "12",
-			lineHeight: "20",
-			textDecoration: "none"
-		},
-		resizingBar: {
-			color: "#CCCCCC",
-			height: "16"
-		}
-	},
-	body: {
-		"default": {
-			height: "44"},
-		paddingX: "16",
-		typography: {
-			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
-			fontWeight: "400",
-			fontSize: "12",
-			lineHeight: "20",
-			textDecoration: "none"
-		}
-	},
-	border: {
-		"default": "#E1E1E1",
-		width: {
-			width: "1"
-		}
-	},
-	radius: "8"};
-var tableTokens = {
-	table: table
-};
+import { t as tableTokens } from './component.table-BQ6at17Y.js';
+import { s as systemTokens } from './system-GBlVDmy4.js';
 
 // ── Header Tokens ──
 const TABLE_HEADER_LAYOUT = {
@@ -75,8 +35,8 @@ const TABLE_BODY_TYPOGRAPHY = {
 };
 // ── Frame / Border Tokens ──
 const TABLE_BORDER = {
-    color: tableTokens.table.border.default,
-    width: tableTokens.table.border.width.width,
+    color: tableTokens.table.border.color,
+    width: tableTokens.table.border.width,
 };
 const TABLE_RADIUS = tableTokens.table.radius;
 // ── Header Icon Color Defaults ──

package/dist/esm/sd-table.entry.js

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-CLCoul8o.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-import { T as TABLE_BODY_TYPOGRAPHY, a as TABLE_BORDER, b as TABLE_RADIUS } from './sd-table.config-Bj-EEo7N.js';
-import './system-CZ4ltUOw.js';
+import { T as TABLE_BODY_TYPOGRAPHY, a as TABLE_BORDER, b as TABLE_RADIUS } from './sd-table.config-0Te8GLCI.js';
+import './component.table-BQ6at17Y.js';
+import './system-GBlVDmy4.js';
 
-const urlAlphabet =
+let urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
 
 /* @ts-self-types="./index.d.ts" */
@@ -16,7 +17,7 @@ let nanoid = (size = 21) => {
   return id
 };
 
-const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__clip{width:100%;min-width:0;height:var(--table-container-height, 400px);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:var(--table-radius, 8px) var(--table-radius, 8px) 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;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}.sd-table__wrapper--loading{overflow:hidden !important;pointer-events:none}.sd-table__wrapper--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;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;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-top:none;border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
+const sdTableCss = () => `sd-table,:host{display:block;width:100%;max-width:100%;min-width:0}sd-table *,:host *{box-sizing:border-box}.sd-table__container{height:var(--table-height, 100%);width:var(--table-width, 100%);max-width:100%;min-width:0;color:#222222;display:flex;flex-direction:column}.sd-table__wrapper{width:100%;min-width:0;height:var(--table-container-height, 400px);border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);border-radius:var(--table-radius, 8px);overflow:hidden}.sd-table__wrapper--radius-use-top{border-radius:0 0 var(--table-radius, 8px) var(--table-radius, 8px)}.sd-table__scroll-container{width:100%;height:100%;display:flex;flex-direction:column;position:relative;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}.sd-table__scroll-container--loading{overflow:hidden !important;pointer-events:none}.sd-table__scroll-container--no-data{overflow:hidden;pointer-events:none}.sd-table__no-data{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;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;top:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none}.sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table--selectable sd-thead,.sd-table--selectable sd-tbody{--selectable:true}.sd-table--sticky-header sd-thead thead{position:sticky;top:0;z-index:120}.sd-table--sticky-column sd-thead,.sd-table--sticky-column sd-tbody{--sticky-column:true}.sd-table--scrolled-left sd-thead,.sd-table--scrolled-left sd-tbody{--scrolled-left:true}.sd-table--scrolled-right sd-thead,.sd-table--scrolled-right sd-tbody{--scrolled-right:true}.sd-table--resizable sd-thead{--resizable:true}.sd-table--no-data sd-thead{opacity:0.4}.sd-table__pagination{position:relative;background:#F9F9F9;height:48px;display:flex;align-items:center;justify-content:center;border:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);margin-top:-1px;border-radius:var(--table-radius, 8px)}.sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}`;
 
 const SdTable = class {
     constructor(hostRef) {
@@ -41,6 +42,7 @@ const SdTable = class {
     height;
     stickyHeader = false;
     stickyColumn = { left: 0, right: 0 };
+    radius = 'default';
     noDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     resolvedNoDataLabel = SdTable.DEFAULT_NO_DATA_LABEL;
     isLoading = false;
@@ -232,6 +234,7 @@ const SdTable = class {
         el.unregisterSpanSync = this.unregisterSpanSync.bind(this);
         el.getSpanSync = this.getSpanSync.bind(this);
         el.isCoveredSync = this.isCoveredSync.bind(this);
+        el.isVisualLastRowSync = this.isVisualLastRowSync.bind(this);
         el.hasRowspanSync = this.hasRowspanSync.bind(this);
         el.registerCellClassSync = this.registerCellClassSync.bind(this);
         el.unregisterCellClassSync = this.unregisterCellClassSync.bind(this);
@@ -246,7 +249,7 @@ const SdTable = class {
             this.pushRowsToChildren(this.rows);
         }
         readTask(() => {
-            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__wrapper');
+            const wrapper = this.el.shadowRoot?.querySelector('.sd-table__scroll-container');
             if (!wrapper)
                 return;
             let rafPending = false;
@@ -382,7 +385,7 @@ const SdTable = class {
         };
     }
     isRowSelectedSync(row) {
-        return Array.from(this.innerSelected).some(r => r[this.rowKey] === row[this.rowKey]);
+        return Array.from(this.innerSelected).some(r => r[(this.rowKey ?? 'id')] === row[(this.rowKey ?? 'id')]);
     }
     async isRowSelected(row) {
         return this.isRowSelectedSync(row);
@@ -391,7 +394,7 @@ const SdTable = class {
         const selectedArray = Array.from(this.innerSelected);
         const exists = this.isRowSelectedSync(row);
         const newSelected = exists
-            ? selectedArray.filter(r => r[this.rowKey] !== row[this.rowKey])
+            ? selectedArray.filter(r => r[(this.rowKey ?? 'id')] !== row[(this.rowKey ?? 'id')])
             : [...selectedArray, row];
         if (newSelected.length === selectedArray.length)
             return;
@@ -409,8 +412,8 @@ const SdTable = class {
             this.innerSelected = new Set([...this.innerSelected, ...pageRows]);
         }
         else {
-            const currentPageKeys = rows.map(r => r[this.rowKey]);
-            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[this.rowKey])));
+            const currentPageKeys = rows.map(r => r[(this.rowKey ?? 'id')]);
+            this.innerSelected = new Set([...this.innerSelected].filter(r => !currentPageKeys.includes(r[(this.rowKey ?? 'id')])));
         }
         this.selected = Array.from(this.innerSelected);
         this.sdSelectChange.emit(Array.from(this.innerSelected));
@@ -421,7 +424,7 @@ const SdTable = class {
     }
     getIsAllCheckedSync(rows) {
         const total = rows.length;
-        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[this.rowKey] === row[this.rowKey])).length;
+        const selectedCount = rows.filter(row => Array.from(this.innerSelected).some(selectedRow => selectedRow[(this.rowKey ?? 'id')] === row[(this.rowKey ?? 'id')])).length;
         if (selectedCount === 0)
             return false;
         if (selectedCount === total)
@@ -647,6 +650,23 @@ const SdTable = class {
         }
         return false;
     }
+    // 셀이 시각적으로 마지막 행(또는 페이지 마지막 행)에 닿는지 판정.
+    // 마지막 행에 border-bottom: none을 적용하기 위함
+    isVisualLastRowSync(rowKey, field) {
+        if (this.rowCount <= 0)
+            return false;
+        const myRowIdx = this.resolveRowIndex(rowKey);
+        if (myRowIdx == null)
+            return false;
+        const span = this.spanRegistry.get(this.spanKey(rowKey, field));
+        const rs = Math.max(1, span?.rowspan ?? 1);
+        const visualBottom = myRowIdx + rs - 1;
+        const pageInfo = this.getPaginationInfoSync();
+        const lastVisibleIdx = pageInfo
+            ? Math.min(pageInfo.endIndex - 1, this.rowCount - 1)
+            : this.rowCount - 1;
+        return visualBottom === lastVisibleIdx;
+    }
     setRowCountSync(count) {
         const safeCount = Math.max(0, Math.floor(this.toFiniteNumber(count, 0)));
         if (safeCount !== this.rowCount) {
@@ -737,24 +757,21 @@ const SdTable = class {
             '--table-body-line-height': `${TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
             '--table-body-text-decoration': TABLE_BODY_TYPOGRAPHY.textDecoration,
         };
-        return (h(Host, { key: 'c20a7cc6d5917c9d09c699f2c40ac2b6d07747e1', style: hostStyle }, h("div", { key: '94f76e75da5c6ff9d0ef93b6c2aa3def4ec1766e', class: "sd-table__container", style: {
+        return (h(Host, { key: 'd868318e2aeb7b3062a702a743f90bb55dbb00b8', style: hostStyle }, h("div", { key: '5b2113ecd1fa52a6170ffcfac5f906fae7ef7548', 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: '3b98c828c7dc42de3d4f9bb645279b20d9079ac4', class: {
-                'sd-table__clip': true,
-                'sd-table__clip--has-pagination': !!(this.pagination &&
-                    this.pagination.rowsPerPage > 0 &&
-                    this.rowCount > 0 &&
-                    !this.useVirtualScroll),
-            } }, h("div", { key: 'b6d04ec953d7b75fb8ad8bc32e2662550d38c5c7', class: {
+            } }, h("div", { key: '389d7f3508727fb76d9d9f98a73963c5556ff993', 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: '3050275c7ecde0aeda3ec881257be4334ebd06fc', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: '7a26c4365e4e28a5ebce1c35bb52a302440542f7', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: '31442f92321eb4aaf5c36c5995a1c25d8069b6ea', class: "sd-table__no-data" }, h("slot", { key: '42f3208fb1c86d118f50e8b1974bff3ede253032', name: "no-data" }, h("span", { key: 'ce7368c64b3502eee2fae7a28e0508d4d1622c25' }, this.resolvedNoDataLabel)))), h("table", { key: '170203f34b4bb11fce0a064622265d093ccbab2a', 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 &&
+                'sd-table__wrapper--radius-use-top': this.radius === 'useTop',
+            } }, h("div", { key: 'e9cdeecb5f318cb1af4e0d2e938e0098e1cc44d0', class: {
+                'sd-table__scroll-container': true,
+                'sd-table__scroll-container--loading': this.isLoading,
+                'sd-table__scroll-container--no-data': this.rowCount === 0 && !this.isLoading,
+            } }, this.isLoading && (h("div", { key: '40caec779763f90e1f48818e3f56e8daabc105a6', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, h("sd-circle-progress", { key: 'bf7a3cabb0023f0a1663dd0337f3399ace0e75e7', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (h("div", { key: 'aac583c7876171a276645146e00afbc43d405607', class: "sd-table__no-data" }, h("slot", { key: '31e18789beeed03bcfd7013c9386eefd6f51b2cd', name: "no-data" }, h("span", { key: '07da091864e588f2ee60e8ea5ffd5ae34c968f68' }, this.resolvedNoDataLabel)))), h("table", { key: '69284f7f819477072450d1b6acbfe081abe4f1ef', 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: 'cfbd5ee8e706c9ef7a2b6a4be8901b7aae47249e', class: "sd-table__pagination" }, h("sd-pagination", { key: '57dad16199d9145fcec0c5ed46beeeac1f08af02', 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: '1314e296ba913600436045b4af54eb0bc1d95d0d', value: this.useInternalPagination
+            !this.useVirtualScroll && (h("div", { key: 'ff30e864526aa8c3fac2cc37499cea7aa6be1420', class: "sd-table__pagination" }, h("sd-pagination", { key: 'ad5badf1d5f518b0bf281e973c46b1381e82ae3c', 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: 'd249e79cfda4c80cb4df9c353dc4f678a5ccb861', value: this.useInternalPagination
                 ? this.innerRowsPerPage
                 : this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", emitValue: true, onSdUpdate: e => {
                 if (!this.isRowsPerPageValue(e.detail))

package/dist/esm/sd-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
 
 const tab = {
 	main: {
@@ -186,7 +186,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: 'ff758fbab0a594c28968074a26ad92a28cd4850b', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '9578cc6d422a304312f9ebc78622264d20d1fb45', 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/esm/sd-tag.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, h } from './index-CLCoul8o.js';
 
 const tag = {
 	xs: {
@@ -85,14 +85,46 @@ const TAG_COLORS = [
     'indigo',
 ];
 const TAG_COLOR_CONFIG = {
-    grey: { background: tagTokens.tag.grey.bg, content: tagTokens.tag.grey.content, icon: tagTokens.tag.grey.content },
-    red: { background: tagTokens.tag.red.bg, content: tagTokens.tag.red.content, icon: tagTokens.tag.red.content },
-    orange: { background: tagTokens.tag.orange.bg, content: tagTokens.tag.orange.content, icon: tagTokens.tag.orange.content },
-    yellow: { background: tagTokens.tag.yellow.bg, content: tagTokens.tag.yellow.content, icon: tagTokens.tag.yellow.content },
-    green: { background: tagTokens.tag.green.bg, content: tagTokens.tag.green.content, icon: tagTokens.tag.green.content },
-    blue: { background: tagTokens.tag.blue.bg, content: tagTokens.tag.blue.content, icon: tagTokens.tag.blue.content },
-    darkblue: { background: tagTokens.tag.darkblue.bg, content: tagTokens.tag.darkblue.content, icon: tagTokens.tag.darkblue.content },
-    indigo: { background: tagTokens.tag.indigo.bg, content: tagTokens.tag.indigo.content, icon: tagTokens.tag.indigo.content },
+    grey: {
+        background: tagTokens.tag.grey.bg,
+        content: tagTokens.tag.grey.content,
+        icon: tagTokens.tag.grey.content,
+    },
+    red: {
+        background: tagTokens.tag.red.bg,
+        content: tagTokens.tag.red.content,
+        icon: tagTokens.tag.red.content,
+    },
+    orange: {
+        background: tagTokens.tag.orange.bg,
+        content: tagTokens.tag.orange.content,
+        icon: tagTokens.tag.orange.content,
+    },
+    yellow: {
+        background: tagTokens.tag.yellow.bg,
+        content: tagTokens.tag.yellow.content,
+        icon: tagTokens.tag.yellow.content,
+    },
+    green: {
+        background: tagTokens.tag.green.bg,
+        content: tagTokens.tag.green.content,
+        icon: tagTokens.tag.green.content,
+    },
+    blue: {
+        background: tagTokens.tag.blue.bg,
+        content: tagTokens.tag.blue.content,
+        icon: tagTokens.tag.blue.content,
+    },
+    darkblue: {
+        background: tagTokens.tag.darkblue.bg,
+        content: tagTokens.tag.darkblue.content,
+        icon: tagTokens.tag.darkblue.content,
+    },
+    indigo: {
+        background: tagTokens.tag.indigo.bg,
+        content: tagTokens.tag.indigo.content,
+        icon: tagTokens.tag.indigo.content,
+    },
 };
 const SQUARE_SIZE_CONFIG = {
     xs: {
@@ -156,11 +188,14 @@ const SdTag = class {
     label = '';
     icon;
     isLeft = true;
-    get resolvedConfig() {
+    get resolvedName() {
         if (!isTagName(this.name)) {
-            throw new Error(`Invalid sd-tag name: ${this.name}`);
+            throw new Error(`Invalid sd-tag name: "${this.name}"`);
         }
-        return TAG_CONFIG[this.name];
+        return this.name;
+    }
+    get resolvedConfig() {
+        return TAG_CONFIG[this.resolvedName];
     }
     renderIcon(color, size) {
         if (!this.icon)
@@ -170,7 +205,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
+        return (h("span", { key: 'a52a06f79f448427ff3fe2a40c43d23a64e8ed62', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -180,7 +215,7 @@ const SdTag = class {
                 '--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: '8da56711cb12127f96195404799581480280507f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '8e737f385a32109ab58fe4da036dbf594079f217', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

package/dist/esm/sd-td.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-Cnwbjz1F.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-CLCoul8o.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;
@@ -114,7 +114,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (h(Host, { key: '84ce2fe2ea8ccb3eaf09e4d2559fc917bdb1077a', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '9b8164a2eac53b927bf59638cb53c35998a75cfe' })));
+        return (h(Host, { key: 'a8b4cb79a6b40119087fcba358a5c8daadb70fe8', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '959b53537662f22e6bb5fe8d775530c11cbdff3b' })));
     }
     static get watchers() { return {
         "field": [{

package/dist/esm/sd-text-link.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
 
 const textLink = {
 	gap: "4",
@@ -7,8 +7,10 @@ const textLink = {
 	},
 	typography: {
 		"default": {
+			fontSize: "12",
 			textDecoration: "none"},
 		underline: {
+			fontSize: "12",
 			textDecoration: "underline"}
 	},
 	content: {
@@ -39,7 +41,7 @@ const TEXT_LINK_COLORS = {
     icon: textLinkTokens.textLink.icon,
 };
 
-const sdTextLinkCss = () => `sd-text-link{display:inline-flex}sd-text-link .sd-text-link{display:inline-flex;align-items:center;gap:var(--sd-text-link-gap);cursor:pointer;user-select:none}sd-text-link .sd-text-link__label{text-decoration:var(--sd-text-link-text-decoration);color:var(--sd-text-link-color, inherit)}sd-text-link .sd-text-link:not(.sd-text-link--disabled):hover .sd-text-link__label{text-decoration:underline}sd-text-link .sd-text-link--disabled{cursor:not-allowed}`;
+const sdTextLinkCss = () => `sd-text-link{display:inline-flex}sd-text-link .sd-text-link{display:inline-flex;align-items:center;gap:var(--sd-text-link-gap);cursor:pointer;user-select:none}sd-text-link .sd-text-link__label{font-size:var(--sd-text-link-font-size, 12px);text-decoration:var(--sd-text-link-text-decoration);color:var(--sd-text-link-color, inherit)}sd-text-link .sd-text-link:not(.sd-text-link--disabled):hover .sd-text-link__label{text-decoration:underline}sd-text-link .sd-text-link--disabled{cursor:not-allowed}`;
 
 const SdTextLink = class {
     constructor(hostRef) {
@@ -68,19 +70,20 @@ const SdTextLink = class {
         const arrowColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : TEXT_LINK_LAYOUT.arrowColor;
         const cssVars = {
             '--sd-text-link-gap': `${TEXT_LINK_LAYOUT.gap}px`,
+            '--sd-text-link-font-size': `${typo.fontSize}px`,
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
+        return (h("span", { key: '8b02293383e914a0d2c9ac4c9fa2bf4d6bd56d97', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, 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: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '1f10b5c49d53009a68550e22167b0ce58c29d555', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'a5b528b595d036c079818fab432171e39a4c1a4e', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'fd1559e836bc3a6089043e5f4d9de12d364ab61f', 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: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: '3af56ca5845d6d544c786142ae5842aca0720808', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/esm/sd-toast-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CLCoul8o.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -101,12 +101,12 @@ const SdToastContainer = class {
         }
     }
     componentDidRender() {
-        if (!this.toasts?.length)
+        if (this.toasts === undefined || this.toasts.length === 0)
             return;
         const hasEntering = this.toasts.some(t => t.state === 'entering');
         if (hasEntering) {
             requestAnimationFrame(() => {
-                this.toasts = (this.toasts || []).map(t => (t.state === 'entering' ? { ...t, state: 'visible' } : t));
+                this.toasts = (this.toasts || []).map(t => t.state === 'entering' ? { ...t, state: 'visible' } : t);
             });
         }
         this.measureHeights();
@@ -232,7 +232,7 @@ const SdToastContainer = class {
         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: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: 'b734ca5768953e095f98a7f8312f6fdd7a24ae30', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {
@@ -248,7 +248,7 @@ const SdToastContainer = class {
                 }, style: this.getToastItemStyle(entry, frontIndex, activeToasts), ref: el => {
                     if (el)
                         this.toastRefs.set(entry.id, el);
-                }, onTransitionEnd: () => this.handleTransitionEnd(entry.id) }, h("sd-toast", { message: entry.options.message, type: entry.options.type || 'default', icon: entry.options.icon, link: entry.options.link, linkLabel: entry.options.linkLabel, useClose: entry.options.useClose, onSdClose: () => this.startDismiss(entry.id) })));
+                }, onTransitionEnd: () => this.handleTransitionEnd(entry.id) }, h("sd-toast", { message: entry.options.message, type: entry.options.type || 'default', icon: entry.options.icon, link: entry.options.link, linkLabel: entry.options.linkLabel, buttonLabel: entry.options.buttonLabel, useClose: entry.options.useClose, onSdClose: () => this.startDismiss(entry.id), onSdButtonClick: (event) => entry.options.onButtonClick?.(event.detail) })));
         })));
     }
 };

package/dist/esm/sd-toast.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
 
 const toast = {
 	icon: "16",
@@ -21,43 +21,73 @@ const toast = {
 	accent: {
 		bg: "#005CC9",
 		content: "#FFFFFF"
-	}};
+	},
+	info: {
+		bg: "#E6F1FF",
+		icon: "#0075FF",
+		text: "#222222",
+		textLink: "#555555"
+	}
+};
 var toastTokens = {
 	toast: toast
 };
 
+const TOAST_BUTTON_NAME_BY_TYPE = {
+    default: 'secondary_sm',
+    danger: 'danger_outline_sm',
+    caution: 'neutral_outline_sm',
+    complete: 'neutral_outline_sm',
+    accent: 'neutral_outline_sm',
+    info: 'secondary_sm',
+};
 const TOAST_TYPE_CONFIG = {
     default: { bg: toastTokens.toast.default.bg, content: toastTokens.toast.default.content },
     danger: { bg: toastTokens.toast.danger.bg, content: toastTokens.toast.danger.content },
     caution: { bg: toastTokens.toast.caution.bg, content: toastTokens.toast.caution.content },
     complete: { bg: toastTokens.toast.complete.bg, content: toastTokens.toast.complete.content },
     accent: { bg: toastTokens.toast.accent.bg, content: toastTokens.toast.accent.content },
+    info: {
+        bg: toastTokens.toast.info.bg,
+        content: toastTokens.toast.info.text,
+        icon: toastTokens.toast.info.icon,
+        linkColor: toastTokens.toast.info.textLink,
+    },
 };
 const TOAST_LAYOUT = {
     iconSize: toastTokens.toast.icon,
 };
 
-const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:700;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__close{flex-shrink:0}`;
+const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:var(--sd-toast-gap, 16px);padding:var(--sd-toast-padding-y, 12px) var(--sd-toast-padding-x, 24px);border-radius:var(--sd-toast-radius, 8px);background-color:var(--sd-toast-bg);color:var(--sd-toast-text);box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:24px;font-weight:500;white-space:nowrap}sd-toast .sd-toast__link{font-size:14px;line-height:24px;font-weight:700;color:var(--sd-toast-link, var(--sd-toast-text));text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px;white-space:nowrap}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__close{flex-shrink:0}`;
 
 const SdToast = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "sdClose", 7);
+        this.buttonClick = createEvent(this, "sdButtonClick", 7);
     }
     icon;
     message;
     link;
     linkLabel;
+    buttonLabel;
     useClose = false;
     type = 'default';
     close;
+    buttonClick;
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
+        const iconColor = typeConfig.icon ?? typeConfig.content;
+        const linkColor = typeConfig.linkColor ?? typeConfig.content;
+        const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
+        const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
+        return (h("div", { key: '26f82a1da683136f605ddcc5c6c6a45266ae3158', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, 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() })))));
+                '--sd-toast-icon': iconColor,
+                '--sd-toast-link': linkColor,
+            } }, h("div", { key: 'd2ed3c831b86e2ddee804f8ce770642ea698f7ce', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'a6dba347a064420c2747963da35ad0d50406f426', class: "sd-toast__icon" }, h("sd-icon", { key: 'a05871f3711ae89050f11bdeb92d27b6c06354ba', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '11901cf0531ac2b658d2278ba27021f9714340d7', class: "sd-toast__content" }, h("span", { key: '5edf234270283818732a5dbfaf581a27c8c084e6', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '518207a380b2d30c160a2a76649222655ec821cf', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'ed4847317cc9e0765a5964ab7ed245a37dce45ee', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '74a8f5d6c2392bdb7c59d754d72ed591fa68bf62', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/esm/sd-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
 
 const toggle = {
 	height: "28",
@@ -118,7 +118,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        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 })));
+        return (h("label", { key: '958d824b5c502a578e1bb7a8fb0d30d59c2d8eda', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '81d5dc8ff0f9ca7e8a219f3c0e7bcce3a4ffc875', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{system-CZ4ltUOw.js → system-GBlVDmy4.js}

@@ -1,11 +1,14 @@
 const color = {
 	bg: {
+		frame: "#FFFFFF",
 		accent: {
 			"default": "#0075FF"}},
 	fg: {
 		primary: "#222222",
 		secondary: "#555555",
 		tertiary: "#888888",
+		success: "#00973C",
+		accent: "#0075FF",
 		inverse: "#FFFFFF"
 	},
 	blue: {
@@ -15,7 +18,6 @@ const color = {
 	grey: {
 		strong: "#737373"}};
 var systemTokens = {
-	color: color
-};
+	color: color};
 
 export { systemTokens as s };

package/dist/esm/{tooltipArrow-D8sr81Xw.js → tooltipArrow-Bc-yw2nt.js}

@@ -1,4 +1,4 @@
-import { h } from './index-Cnwbjz1F.js';
+import { h } from './index-CLCoul8o.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/types/components/assets/CheckboxCheck.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxCheck: (props: any) => any;

package/dist/types/components/assets/CheckboxIndeterminate.d.ts

@@ -0,0 +1 @@
+export declare const CheckboxIndeterminate: (props: any) => any;

package/dist/types/components/assets/index.d.ts

@@ -22,6 +22,8 @@ export declare const Icons: {
     readonly check: (props: any) => any;
     readonly checkFill: (props: any) => any;
     readonly checkOutline: (props: any) => any;
+    readonly checkboxCheck: (props: any) => any;
+    readonly checkboxIndeterminate: (props: any) => any;
     readonly chevronDown: (props: any) => any;
     readonly chevronLeft: (props: any) => any;
     readonly chevronLeftEnd: (props: any) => any;

package/dist/types/components/sd-action-modal/sd-action-modal.d.ts

@@ -1,8 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { ButtonV2Props } from '../sd-button-v2/sd-button-v2.config';
+import type { ButtonProps } from '../sd-button/sd-button.config';
 export declare class SdActionModal {
     modalTitle: string;
-    buttonProps?: ButtonV2Props;
+    buttonProps?: ButtonProps;
     width?: string | number;
     height?: string | number;
     close: EventEmitter<void>;

package/dist/types/components/sd-badge/sd-badge.d.ts

@@ -1,6 +1,5 @@
 import { type BadgeColor } from './sd-badge.config';
 export declare class SdBadge {
     color: BadgeColor;
-    label: string;
     render(): any;
 }