@sellmate/design-system 1.0.76 → 1.0.77

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

@@ -1,7 +1,9 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var constants = require('./constants-DJRV1upE.js');
+var sdTable_config = require('./sd-table.config-hnNodd18.js');
+require('./system-DRemSdU1.js');
 
 const urlAlphabet =
   'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
@@ -16,7 +18,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:1px solid #E1E1E1;border-radius:8px;overflow:hidden}.sd-table__clip--has-pagination{border-radius:8px 8px 0 0}.sd-table__wrapper{width:100%;height:100%;display:flex;flex-direction:column;position:relative;font-size:12px;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:12px;color:#888888;pointer-events:none;z-index:200;background:rgba(255, 255, 255, 0.6)}.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:1px solid #E1E1E1;border-top:none;border-radius:0 0 8px 8px}.sd-table__pagination sd-select-v2{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__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 SdTable = class {
     constructor(hostRef) {
@@ -640,12 +642,10 @@ const SdTable = class {
         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 (index.h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row }));
+            return index.h("sd-tr", { key: absoluteIdx, "row-key": String(absoluteIdx), row: row });
         });
     }
     get tableClasses() {
@@ -667,24 +667,34 @@ const SdTable = class {
     }
     render() {
         const resolvedTableId = this.getResolvedTableId();
-        return (index.h(index.Host, { key: 'd73cd690ad11ce92af37b6f32374f6f891c5b677' }, index.h("div", { key: 'f51d23212885ad8121b9a4e895fb854f1e142bc4', class: "sd-table__container", style: {
+        const hostStyle = {
+            '--table-radius': `${sdTable_config.TABLE_RADIUS}px`,
+            '--table-border-color': sdTable_config.TABLE_BORDER.color,
+            '--table-border-width': `${sdTable_config.TABLE_BORDER.width}px`,
+            '--table-body-font-family': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontFamily,
+            '--table-body-font-weight': sdTable_config.TABLE_BODY_TYPOGRAPHY.fontWeight,
+            '--table-body-font-size': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.fontSize}px`,
+            '--table-body-line-height': `${sdTable_config.TABLE_BODY_TYPOGRAPHY.lineHeight}px`,
+            '--table-body-text-decoration': sdTable_config.TABLE_BODY_TYPOGRAPHY.textDecoration,
+        };
+        return (index.h(index.Host, { key: '1a80b7c3589a8a2eefaabf24ed895c927543aac4', style: hostStyle }, index.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)`,
-            } }, index.h("div", { key: '84b1ba7b2220ff55304b9c19e59304ca2257cff0', class: {
+            } }, index.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),
-            } }, index.h("div", { key: 'c901eba67eae29515bf0b3edcc6632b2aacf0f80', class: {
+            } }, index.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 && (index.h("div", { key: '35a237d0203b2479dbdb77ac42c918a9375bdfd3', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '21a29981c1cdbd679f46abd2e7de7794c9ebbca9', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '07ad28bc6e7556cfe229fc1e952410f388424a7f', class: "sd-table__no-data" }, index.h("slot", { key: 'bf21e60f5b86614587b704bea2965b9467c7f467', name: "no-data" }, index.h("span", { key: 'f3d012d12e9189545b0cef52250502d46cb9a764' }, this.resolvedNoDataLabel)))), index.h("table", { key: '655d3dc017c6445ec454faef0e5e9837b7ee0013', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
+            } }, this.isLoading && (index.h("div", { key: '656bc53538c8513e014f31f1e976fd66ce79c7aa', class: "sd-table__loading", style: { top: `${this.loadingScrollTop}px` } }, index.h("sd-circle-progress", { key: '74078add6860fc95e238d89335d57e205e751cd6', indeterminate: true }))), this.rowCount === 0 && !this.isLoading && (index.h("div", { key: '18a33a7247bde3d08472f8082325c76217734e5d', class: "sd-table__no-data" }, index.h("slot", { key: '966cb066f721695013a3e5a1a64543544b09fa77', name: "no-data" }, index.h("span", { key: 'd335a9b1b2e847b267cefb9d12f7265c5f67f394' }, this.resolvedNoDataLabel)))), index.h("table", { key: '8fd0a2428bfd4dd6a574bbb02139088c31408866', class: this.tableClasses }, this.autoThead ? (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-thead", { rows: this.rows ?? [] }))) : (index.h("slot", { name: `${resolvedTableId}-head`, onSlotchange: this.handleStructureSlotChange })), this.autoTbody ? (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }, index.h("sd-tbody", { rows: this.rows ?? [] }, this.renderAutoRows()))) : (index.h("slot", { name: `${resolvedTableId}-body`, onSlotchange: this.handleStructureSlotChange }))))), this.pagination &&
             this.pagination.rowsPerPage > 0 &&
             this.rowCount > 0 &&
-            !this.useVirtualScroll && (index.h("div", { key: '7ab0b30a0c0e0a197b0f79c6b07ef5614d5d2879', class: "sd-table__pagination" }, index.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 && (index.h("sd-select-v2", { key: 'a9ab33347db0714da188f658a2ca1902502db690', value: this.useInternalPagination
+            !this.useVirtualScroll && (index.h("div", { key: '6f483b1a23456bbe42ff769a50c9de5638e7754f', class: "sd-table__pagination" }, index.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 && (index.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/cjs/sd-table.config-hnNodd18.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var system = require('./system-DRemSdU1.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
+};
+
+// ── Header Tokens ──
+const TABLE_HEADER_LAYOUT = {
+    height: tableTokens.table.header.height,
+    paddingX: tableTokens.table.header.paddingX,
+    gap: tableTokens.table.header.gap,
+};
+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,
+};
+const TABLE_HEADER_COLORS = {
+    bg: tableTokens.table.header.bg,
+};
+const TABLE_HEADER_RESIZING_BAR = {
+    color: tableTokens.table.header.resizingBar.color,
+    height: tableTokens.table.header.resizingBar.height,
+};
+// ── Body Tokens ──
+const TABLE_BODY_LAYOUT = {
+    default: {
+        height: tableTokens.table.body.default.height},
+    paddingX: tableTokens.table.body.paddingX};
+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 ──
+const TABLE_BORDER = {
+    color: tableTokens.table.border.default,
+    width: tableTokens.table.border.width.width,
+};
+const TABLE_RADIUS = tableTokens.table.radius;
+// ── Header Icon Color Defaults ──
+const ICON_DEFAULT_COLOR = {
+    pageEdit: system.systemTokens.color.darkblue.strong,
+    arrowDown: system.systemTokens.color.darkblue.strong,
+    arrowUp: system.systemTokens.color.darkblue.strong,
+    updown: system.systemTokens.color.grey.strong,
+    pageMove: system.systemTokens.color.darkblue.strong,
+    star: system.systemTokens.color.blue.strong,
+};
+const resolveTableIconColor = (name, override) => override ?? ICON_DEFAULT_COLOR[name];
+const resolveSortIconName = (sort) => sort === 'asc' ? 'arrowDown' : sort === 'desc' ? 'arrowUp' : 'updown';
+
+exports.TABLE_BODY_LAYOUT = TABLE_BODY_LAYOUT;
+exports.TABLE_BODY_TYPOGRAPHY = TABLE_BODY_TYPOGRAPHY;
+exports.TABLE_BORDER = TABLE_BORDER;
+exports.TABLE_HEADER_COLORS = TABLE_HEADER_COLORS;
+exports.TABLE_HEADER_LAYOUT = TABLE_HEADER_LAYOUT;
+exports.TABLE_HEADER_RESIZING_BAR = TABLE_HEADER_RESIZING_BAR;
+exports.TABLE_HEADER_TYPOGRAPHY = TABLE_HEADER_TYPOGRAPHY;
+exports.TABLE_RADIUS = TABLE_RADIUS;
+exports.resolveSortIconName = resolveSortIconName;
+exports.resolveTableIconColor = resolveTableIconColor;

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

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

package/dist/cjs/sd-tag.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const tag = {
 	xs: {
@@ -172,7 +172,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'def10730670f37a62fa76b507f7f15a1b1f956fc', class: "sd-tag", style: {
+        return (index.h("span", { key: '3e7a6602ee73f56e5709711ac735460230de7e58', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -182,7 +182,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, index.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, index.h("span", { key: '8da56711cb12127f96195404799581480280507f', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var constants = require('./constants-DJRV1upE.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}`;
@@ -88,7 +88,7 @@ const SdTd = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'da9ce2edb986d4b3cf1a6e5f59030009f1288250', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '8514071bd38c4f5b1997ae7239b8585a25f97ce0' })));
+        return (index.h(index.Host, { key: '1702396f538453cf26beb81b63926ea73b7baa89', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: 'bd04afefd83178f48eb93b4e7d189386a817ff72' })));
     }
     static get watchers() { return {
         "field": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const textLink = {
 	gap: "4",
@@ -73,16 +73,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '77c1aa4a4a6297af9431947b7146db2ddfad52b5', class: {
+        return (index.h("span", { key: '9bd62ac603764a5938f3c72bac3a8bf893dfb233', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '6f760b3c7e0adccd2aa08cb662cca90a3d3a227b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '3ff017970956d8e5cb72b4d6e26d33aaf0551e76', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: '8332cbe3b2283ce866044e55804e35338569a38f', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '9d63aea3c45c4962e5766e7059a166a85e7a357f', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'dc73d60dd1e593c597a6b5dd977db380c21ff680', class: labelClassName }, this.label), this.useArrow && (index.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',
-            } }, index.h("sd-icon", { key: '2fa166ef60f6d1ee933450146bc667ee89dad2ce', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: 'a5c8fb48e66f4a6820da1a54cedd7b1a13c5dcec', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/cjs/sd-textarea.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var component_textinput = require('./component.textinput-BpXDeZPD.js');
 
@@ -130,7 +130,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (index.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 }, index.h("div", { key: '2cbc8ef4febeab89eb336cb29d34abdbf9f2f080', class: "sd-textarea__content" }, index.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 (index.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 }, index.h("div", { key: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, index.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 watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -234,7 +234,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 (index.h("div", { key: '5057793be2d6ce213edc84d58f7273248646dc19', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '925f4bf56626e8c722051afa65aa64f2a50007db', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const toast = {
 	icon: "16",
@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: '77954c9d285339cb48032eec5eca0dcbe308affc', style: {
+        return (index.h("div", { key: 'f5db941adee41c3d2c57c2c7a12d94d03dcdebb6', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: '73c792f19982140f91397a3ec7d6e22914ca316f', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'cc140bfd043b0d0cd6a7697053f736dac707f86b', class: "sd-toast__icon" }, index.h("sd-icon", { key: '85f38036cd39cb4d0f4a43ef0d307ef9faa03eb1', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '4d36e34a9ccac80fc2ed01f33b1e2aa80d70c78b', class: "sd-toast__content" }, index.h("span", { key: '9105d37004bbde90e8a7118ca5a58a6e4d6953f5', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'fdaabae7d8efb6540ce770cc5783b286789cdb3c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.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() })))));
+            } }, index.h("div", { key: '68362fac26744fc7e805a18c589f4aff5845edc1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '8ec7941b469b6d0242ab68b7928a9dbf6e75bb5f', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'c057a100de91cecc3435bfa6a95c928727eb1836', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '21e84dd6cdf7efa52611da532a0983268c7c2cb2', class: "sd-toast__content" }, index.h("span", { key: '99c370fe3d4a54103fbccef395afadf2923f3613', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '3ce7109c2d1f5cd03f4fcc6bb01ede14c6400734', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.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() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const toggle = {
 	height: "28",
@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'e9bb126d92605cdd3a88ff1840aa79a4b66c7cf8', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '41c18a29c10ae91b84ecd6d2619a40ab99f5d151', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '9ef981165b998f43ec23f3bb1cf0ef385962d7fb', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6b6d2a89f43036f624c7bc291b2c5aa7a93c8f0a', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{system-BbCUNhDJ.js → system-DRemSdU1.js}

@@ -9,7 +9,13 @@ const color = {
 		secondary: "#555555",
 		tertiary: "#888888",
 		inverse: "#FFFFFF"
-	}};
+	},
+	blue: {
+		strong: "#0075FF"},
+	darkblue: {
+		strong: "#006AC1"},
+	grey: {
+		strong: "#737373"}};
 var systemTokens = {
 	color: color
 };

package/dist/cjs/{tooltipArrow-DuANjCfc.js → tooltipArrow-BEff0q3z.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.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/collection/collection-manifest.json

@@ -11,28 +11,26 @@
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button/sd-radio-button.js",
     "components/sd-radio-group/sd-radio-group.js",
-    "components/sd-select/sd-select.js",
-    "components/sd-select-multiple-group/sd-select-multiple-group.js",
-    "components/table-test/table-test.js",
     "components/sd-action-modal/sd-action-modal.js",
+    "components/sd-ghost-button/sd-ghost-button.js",
+    "components/sd-button-v2/sd-button-v2.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
-    "components/sd-button-v2/sd-button-v2.js",
     "components/sd-card/sd-card.js",
     "components/sd-chip/sd-chip.js",
     "components/sd-circle-progress/sd-circle-progress.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
+    "components/sd-icon/sd-icon.js",
+    "components/sd-tag/sd-tag.js",
+    "components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js",
     "components/sd-date-picker/sd-date-picker.js",
     "components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js",
-    "components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js",
     "components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js",
     "components/sd-portal/sd-portal.js",
-    "components/sd-dropdown-button/sd-dropdown-button.js",
     "components/sd-field/sd-field.js",
+    "components/sd-dropdown-button/sd-dropdown-button.js",
     "components/sd-file-picker/sd-file-picker.js",
     "components/sd-floating-portal/sd-floating-portal.js",
-    "components/sd-ghost-button/sd-ghost-button.js",
-    "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
     "components/sd-linear-progress/sd-linear-progress.js",
     "components/sd-loading-container/sd-loading-container.js",
@@ -40,18 +38,11 @@
     "components/sd-modal-container/sd-modal-container.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
-    "components/sd-progress/sd-progress.js",
-    "components/sd-select/sd-select-dropdown/sd-select-dropdown.js",
-    "components/sd-select/sd-select-option/sd-select-option.js",
-    "components/sd-select/sd-select-search-input/sd-select-search-input.js",
-    "components/sd-select-group/sd-select-group.js",
-    "components/sd-select-multiple/sd-select-multiple.js",
-    "components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js",
-    "components/sd-select-v2/sd-select-v2.js",
-    "components/sd-select-v2/sd-select-v2-list-item/sd-select-v2-list-item.js",
-    "components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js",
-    "components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js",
-    "components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js",
+    "components/sd-select/sd-select.js",
+    "components/sd-select/sd-select-trigger/sd-select-trigger.js",
+    "components/sd-select/sd-select-list-item/sd-select-list-item.js",
+    "components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js",
+    "components/sd-select/sd-select-listbox/sd-select-listbox.js",
     "components/sd-switch/sd-switch.js",
     "components/sd-table/sd-table.js",
     "components/sd-table/sd-tbody/sd-tbody.js",
@@ -59,7 +50,6 @@
     "components/sd-table/sd-thead/sd-thead.js",
     "components/sd-table/sd-tr/sd-tr.js",
     "components/sd-tabs/sd-tabs.js",
-    "components/sd-tag/sd-tag.js",
     "components/sd-text-link/sd-text-link.js",
     "components/sd-textarea/sd-textarea.js",
     "components/sd-toast/sd-toast.js",

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: 'c8fdd9cdb0ce6850b900744f087ace5739b13e1f', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'a8ba3d0c496f7fbf0291818c5136e466dfbe3cab', class: "sd-action-modal__header" }, h("h2", { key: 'df021377c4368ecf2316a019dbf3126923912ea2', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '19f226d875e53f12192975165f6c0686120692c1', class: "sd-action-modal__header-sub" }, h("slot", { key: '859a677df07d6d869fbebcadfa59aab54da08cab', name: "header-sub-title" })), h("sd-ghost-button", { key: '3fab2e805587a3bfe450696a568c67ff08a7920a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '94911045fe85bd87a9c2ba84ae2e8ff57b1f91ad', class: "sd-action-modal__body" }, h("slot", { key: '12430e8a43dbe76fde667b2ac5b79fa5fae89248', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'd90243f5ce989e19e8f1f2b0d4dbab426908d706', class: "sd-action-modal__footer" }, h("div", { key: '512b80f97adbe1ba36805418476ff2e611855338', class: "sd-action-modal__footer-sub" }, h("slot", { key: '9ee6b21a2e004074f1e468893ae5831eb440501b', name: "bottom-sub-content" })), h("sd-button-v2", { key: '48bd4e35cc5ae630989d057f41df028824e9da78', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '8aa9962dd66af45cbb9f7a16e087b8e5553692b5', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'fe47461827e9ded9a055134869744b9ae57be7bd', class: "sd-action-modal__header" }, h("h2", { key: '911619c8669b1ea109bdc35aa8c6850eade4c49e', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'af2959f85fbedaa0f2f04d3c0bfb110338ab7c30', class: "sd-action-modal__header-sub" }, h("slot", { key: '21801f18cce8eb0fec750ed4dbbe7eb78b6bba89', name: "header-sub-title" })), h("sd-ghost-button", { key: '6b3cbb9f3bc8566bde5a3245384bab03b71ba41f', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '0fb3e066792e018282644123978bb395a56cdf66', class: "sd-action-modal__body" }, h("slot", { key: 'ba8436ff647e422602b92ba982145e4db9366b1e', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '72a21271d7f9301d3bb4e6beb8f66b33b85554e2', class: "sd-action-modal__footer" }, h("div", { key: 'b53076fddc6a11bd64ff27bdf63577cc6f22c4bf', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'bdea9bd98cd8e5a3f0fec66c7d1424b86c7995d5', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'c2a222662a5f06dfc18928059e68837ddb0b5e95', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '6050de370a7c9cbad2c4eb2d9e19180d54bcf64f', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '34c8fdf04e61f9fb16b651764e4cb13b2c6ec0c5', class: "sd-badge__dot" }), h("div", { key: '03ceee1c7d54589dfa61aef8e80be5799a816a66', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: '3737fa6c3023e7adaaf3ae4086efe6d9acadcb67', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'f13d60974520124abeb4fcd49fed638002674267', class: "sd-badge__dot" }), h("div", { key: '29c528444f3e4e4b41315586f7d31e2e828400df', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-barcode-input/sd-barcode-input.js

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: 'c537aef39f971023f90d7d0d7ad6cb6819b06b48', 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, size: this.size, 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("label", { key: '2ca7874dd2d9965f3246746a6f0311ce6cc6fe8e', class: "sd-barcode-input__content" }, h("slot", { key: 'dfed2f18620c5ee6902e1f2083b2e046190ad852', name: "prefix" }), h("input", { key: '80dbd54234b7a1b0db8ae8b3165653f63e8c9039', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'd0b0c22126506e16b23ce9cce1a280366d7d4f4c', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '41ae6b492877ca5c3aa1083372878c9c41f694e3', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '359bac03c40af3bfc067957220124c00d0f542a1', 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, size: this.size, 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("label", { key: '0512c6c4ba9f778c65d6aaf9fd441e66d3e09cf7', class: "sd-barcode-input__content" }, h("slot", { key: '47f7ff7b11b0f10a6f6efce02473c63a02ab9129', name: "prefix" }), h("input", { key: '3f9150a1f188339a9d119475070eb53bca76b61a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'e193c4921de2cd71962841745e163620b3eac436', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '4ca22273d2ef5c79d439c9469bf8dbef5439e685', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

package/dist/collection/components/sd-button-v2/sd-button-v2.js

@@ -62,13 +62,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && Boolean(this.icon) !== Boolean(this.rightIcon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: '19a9be4f92af097e104f64e890203aab3f897c61', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: 'e3e2074fbe2b48117d5834efac7ff3036757aab3', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.color,
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '813e88dce8e00e983caa70da63fe7766ee115b68', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '31b6980a27ddbeff51b1f28e13b197164ab3175f', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '85737212b55b6d48c9c17312f0ae7a419298da4c', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: 'ef8b914dec71d6857c26a26be74e63d9440a46de', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: '90ea3bf42c9e16c836c6fdfdf26a74c8a848c31b', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'b9f4a1c42ae866aac1f65f4bbedb282ae0c10c72', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '5e5dfbabdbec86c2da625c6a70fcda10303d0e50', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: 'f1c3a74b6d7e83fa755c97f83c6d97dea8411537', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: '299b67c4e5a95d03c67bfe7a7cc13cfda642e494' }, h("div", { key: '44630cec810c1ee0cc6526764adbae866f3d68f0', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'bbcb7e2332b1772cff4fd3b132e6378f6fbc0832' }))));
+        return (h(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, h("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -70,6 +70,9 @@ export class SdCheckbox {
             valueSet.has(this.val) ? valueSet.delete(this.val) : valueSet.add(this.val);
             newValue = Array.from(valueSet);
         }
+        else if (this.value === null) {
+            newValue = false;
+        }
         else {
             newValue = !this.isChecked;
         }
@@ -97,13 +100,13 @@ export class SdCheckbox {
             '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
             '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (h("label", { key: '1a1c4dac0a2ce24ae51ce0baba74a7add387aa2f', class: this.checkboxClasses, style: cssVars }, h("input", { key: '4a45bc9bbaaf6ddaebf3445045ab7b1f789f81d5', type: "checkbox", ref: el => {
+        return (h("label", { key: '0e4a142753f8ceda6356c184f1f227e9f11b8a43', class: this.checkboxClasses, style: cssVars }, h("input", { key: '53f7bac2fbc2c197ddcc2bb3cd0779598155af4c', type: "checkbox", ref: el => {
                 this.inputEl = el;
-            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '7d8ae7276470bf4543cdee1a0b25793f07d23c66', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), h("div", { key: '0725d9e2ed16bec52b6340c9633ffed021558560', class: "sd-checkbox__bg" }, this.isChecked !== false ? (h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
                 ? CHECKBOX_COLORS.checked.iconDisabled
                 : this.inverse
                     ? CHECKBOX_COLORS.checked.iconInverse
-                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: 'd791d977073b0916917c7ce770cf73c1ff81f3bd', class: "sd-checkbox__label" }, this.label)));
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && h("span", { key: 'dcb8b972e88aa06d0a338ce8d2e2b86a0fbd8f3f', class: "sd-checkbox__label" }, this.label)));
     }
     static get is() { return "sd-checkbox"; }
     static get originalStyleUrls() {

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

@@ -205,7 +205,7 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: '7d84dd478510c7e144fd049028f2f0a70a909016', class: {
+        return (h("span", { key: 'a821268b6bc2d04bd311b238009b750424e04e72', class: {
                 'sd-chip': true,
                 [`sd-chip--${state}`]: true,
                 'sd-chip--disabled': this.disabled,

package/dist/collection/components/sd-circle-progress/sd-circle-progress.js

@@ -27,7 +27,7 @@ export class SdCircleProgress {
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
         const showPercent = !this.indeterminate;
-        return (h(Host, { key: '46d74c0edb5a5e8cd0472c83efc45a0efaf353b4', style: hostStyle }, h("svg", { key: '34117c89eb180370a215807e614ad08f4f72b517', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '08ac6f011b6a4b6744ddcf437b1e0a5b96abfc6e', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: '5ae0a53ce10bd5a8b2f316ebd00d3ee28c4336d6', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: 'fd52ee1947d41b2117c9ea6e4cc9a448799342e3', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'a58776c4ef67eb900eba97ff4fed138c8f5e8452', class: "sd-circle-progress__label" }, this.label)));
+        return (h(Host, { key: '9a4424e79b095c240b2dd53c8655b9a4cccaf581', style: hostStyle }, h("svg", { key: '37ca87d4c4aa6ab6b84a4301225d775f1998c0c1', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '372f7031310dddba431323b0527c273311a498e3', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), h("circle", { key: 'def6ff7573e4c4a08648f35f7cb545d6b8064f6d', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle })), showPercent && (h("span", { key: '13d6345672fdafaf6a1e1eef9f5987179a99c3ae', class: "sd-circle-progress__percent" }, Math.round(this.clampedValue), "%")), this.label && h("span", { key: 'c42e2fa2826284017e530e967975e45277ae9ee3', class: "sd-circle-progress__label" }, this.label)));
     }
     static get is() { return "sd-circle-progress"; }
     static get originalStyleUrls() {