@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -1,11 +1,10 @@
-import { r as registerInstance, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, h } from './index-0U6dRjlq.js';
 
 const tag = {
 	xs: {
 		height: "20",
 		paddingX: "8",
 		gap: "4",
-		icon: "12",
 		typography: {
 			fontSize: "11",
 			fontWeight: "500",
@@ -16,7 +15,6 @@ const tag = {
 		height: "24",
 		paddingX: "8",
 		gap: "4",
-		icon: "16",
 		typography: {
 			fontSize: "12",
 			fontWeight: "700",
@@ -28,7 +26,6 @@ const tag = {
 		height: "28",
 		paddingX: "12",
 		gap: "6",
-		icon: "16",
 		typography: {
 			fontSize: "14",
 			fontWeight: "700",
@@ -85,14 +82,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: {
@@ -102,7 +131,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
         fontWeight: tagTokens.tag.xs.typography.fontWeight,
         lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.xs.icon),
+        iconSize: 12,
         radius: `${tagTokens.tag.xs.radius}px`,
     },
     sm: {
@@ -112,7 +141,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
         fontWeight: tagTokens.tag.sm.typography.fontWeight,
         lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.sm.icon),
+        iconSize: 16,
         radius: `${tagTokens.tag.sm.radius}px`,
     },
     md: {
@@ -122,7 +151,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
         fontWeight: tagTokens.tag.md.typography.fontWeight,
         lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.md.icon),
+        iconSize: 16,
         radius: `${tagTokens.tag.md.radius}px`,
     },
 };
@@ -156,21 +185,27 @@ const SdTag = class {
     label = '';
     icon;
     isLeft = true;
-    get resolvedConfig() {
+    componentWillLoad() {
+        this.name = this.name ?? 'square_sm_grey';
+    }
+    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)
+        if (this.icon == null)
             return null;
         return h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
     }
     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: 'bcf16350c162da2907ddf4ac53924d016a2457dd', 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: '248f9d8df1ff10af3c533580203cac1f816d8000', 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-0U6dRjlq.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}`;
@@ -17,6 +17,10 @@ const SdTd = class {
     // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
     // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
     sdClass;
+    dividerLeft = false;
+    dividerRight = false;
+    // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
+    useFrame = false;
     handleFieldChange(_newField, oldField) {
         this.syncSlotName();
         this.syncSpanRegistration();
@@ -33,10 +37,18 @@ const SdTd = class {
     handleSdClassChange() {
         this.syncCellClassRegistration();
     }
+    handleDividerChange() {
+        this.syncCellClassRegistration();
+    }
+    handleUseFieldChange() {
+        this.syncUseFieldRegistration();
+        this.requestParentTrUpdate();
+    }
     componentWillLoad() {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -47,6 +59,7 @@ const SdTd = class {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
     }
     // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
     // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
@@ -54,12 +67,14 @@ const SdTd = class {
     connectedCallback() {
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
     }
     disconnectedCallback() {
         const table = this.findTable();
-        if (table && this.field && this.rowKey != null) {
+        if (table != null && this.field !== '' && this.rowKey != null) {
             table.unregisterSpanSync?.(String(this.rowKey), this.field);
             table.unregisterCellClassSync?.(String(this.rowKey), this.field);
+            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
             this.requestParentTrUpdate();
         }
     }
@@ -80,7 +95,7 @@ const SdTd = class {
     }
     syncSpanRegistration() {
         const table = this.findTable();
-        if (!table?.registerSpanSync || !this.field || this.rowKey == null)
+        if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
             return;
         const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
         const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
@@ -94,27 +109,45 @@ const SdTd = class {
             return;
         const oldField = prevField ?? this.field;
         const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
-        if (oldField && oldRowKey != null) {
+        if (oldField !== '' && oldRowKey != null) {
             table.unregisterCellClassSync?.(oldRowKey, oldField);
         }
-        if (!table.registerCellClassSync || !this.field || this.rowKey == null)
+        if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
             return;
-        table.registerCellClassSync(String(this.rowKey), this.field, this.sdClass);
+        const combinedClass = [
+            this.sdClass,
+            this.dividerLeft && 'td--divider-left',
+            this.dividerRight && 'td--divider-right',
+        ]
+            .filter(Boolean)
+            .join(' ') || undefined;
+        table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
         this.requestParentTrUpdate();
     }
+    syncUseFieldRegistration() {
+        const table = this.findTable();
+        if (!table || this.field === '' || this.rowKey == null)
+            return;
+        if (this.useFrame) {
+            table.registerUseFrameSync?.(String(this.rowKey), this.field);
+        }
+        else {
+            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
+        }
+    }
     syncSlotName() {
         const table = this.el.closest('sd-table');
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const tableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (this.field && this.rowKey !== undefined && tableId) {
+        if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
             this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
         }
     }
     render() {
-        return (h(Host, { key: '84ce2fe2ea8ccb3eaf09e4d2559fc917bdb1077a', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '9b8164a2eac53b927bf59638cb53c35998a75cfe' })));
+        return (h(Host, { key: 'ececfaf265a550ee38c5c2cc2ddd2875352deb10', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: 'c4a43f9affc1938d882e63e91ac90d570efffa37' })));
     }
     static get watchers() { return {
         "field": [{
@@ -131,6 +164,15 @@ const SdTd = class {
             }],
         "sdClass": [{
                 "handleSdClassChange": 0
+            }],
+        "dividerLeft": [{
+                "handleDividerChange": 0
+            }],
+        "dividerRight": [{
+                "handleDividerChange": 0
+            }],
+        "useFrame": [{
+                "handleUseFieldChange": 0
             }]
     }; }
 };

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-0U6dRjlq.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,25 @@ 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: '284a073ec6aca3ad91bffe084c3b84813df58772', role: "button", tabindex: this.disabled ? -1 : 0, 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, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, this.icon && (h("sd-icon", { key: '1e2021703a766769aa647f418fb4b287039d58a5', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'a25f207b8bf5bc2c221f0b370159b61ba2f27040', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'f273671ee796224bada0d2d27fc58ff893c433e7', 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: '2e499bf0c1cd57d1ffb90999daa1c38d0cf43df8', 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-0U6dRjlq.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: '4cf4413f350c2a1adc475c567d874252b1786e91', 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-0U6dRjlq.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: 'edab2d1d8ac8222a988d38279f1a002281454f51', 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: '8dd98dd58cdf003ce031e5ae96b749a037333ce1', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '2b78cbc4fe96cc00d444fb49956da1fe245993ef', class: "sd-toast__icon" }, h("sd-icon", { key: '679852c9a19046ce1d2c9a0cdb4346f6e23c77fb', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '2798bd2392e9fc3c4c0375d894572da13d3d7e25', class: "sd-toast__content" }, h("span", { key: '76ab798742baa63b21bda60867cbeb5aa20f7957', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '6eb61ca5737f9af06ad63cfcef671e46ecc8de47', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '6c1ad7d494c7cc218b1058fec1ed3e42af0c83fc', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '32dd9adcc951a3a852bf20540376bd4d7ced7526', 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-0U6dRjlq.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: '0b8273ed8f8efae70de32b92671bbd1353e877dc', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '2ec9909142463f8ba556ad885cb7f97bedad6b31', 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-O5LOsHae.js}

@@ -1,4 +1,4 @@
-import { h } from './index-Cnwbjz1F.js';
+import { h } from './index-0U6dRjlq.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;
 }

package/dist/types/components/{sd-button-v2/sd-button-v2.config.d.ts → sd-button/sd-button.config.d.ts}

@@ -1,14 +1,8 @@
-export type ButtonV2Size = 'xs' | 'sm' | 'md' | 'lg';
-export type ButtonV2Type = 'button' | 'submit' | 'reset';
+import type { Components } from '../../components';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonType = 'button' | 'submit' | 'reset';
 export declare const BUTTON_FOCUS_RING_COLOR = "#0075FF";
-export interface ButtonV2Props {
-    name?: ButtonV2Name;
-    label?: string;
-    icon?: IconName;
-    ariaLabel?: string;
-    disabled?: boolean;
-    type?: ButtonV2Type;
-}
+export type ButtonProps = Partial<Components.SdButton>;
 export declare const BUTTON_CONFIG: {
     readonly primary_xs: {
         readonly variant: "primary";
@@ -131,8 +125,8 @@ export declare const BUTTON_CONFIG: {
         readonly color: string;
     };
 };
-export type ButtonV2Name = keyof typeof BUTTON_CONFIG;
-export declare const BUTTON_ICON_SIZES: Record<ButtonV2Size, number>;
+export type ButtonName = keyof typeof BUTTON_CONFIG;
+export declare const BUTTON_ICON_SIZES: Record<ButtonSize, number>;
 export declare const PRESET_HOVER_BACKGROUNDS: {
     readonly primary: string;
     readonly secondary: string;
@@ -157,8 +151,8 @@ export declare const PRESET_BORDER_COLORS: {
     readonly danger: "transparent";
     readonly danger_outline: string;
 };
-export type ButtonV2Preset = keyof typeof PRESET_CONTENT_COLORS;
+export type ButtonPreset = keyof typeof PRESET_CONTENT_COLORS;
 export declare const DISABLED_TEXT: string;
 export declare const DISABLED_ICON: string;
-export declare const isButtonV2Name: (value: string) => value is ButtonV2Name;
-export declare const getPresetName: (value: ButtonV2Name) => ButtonV2Preset;
+export declare const isButtonName: (value: string) => value is ButtonName;
+export declare const getPresetName: (value: ButtonName) => ButtonPreset;

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

@@ -1,22 +1,20 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type ButtonVariant = 'primary' | 'outline' | 'ghost';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+import { type ButtonName, type ButtonType } from './sd-button.config';
 export declare class SdButton {
-    el: HTMLElement;
-    variant?: ButtonVariant;
-    size: ButtonSize;
-    color: string;
+    name: ButtonName;
     label: string;
-    disabled: boolean;
-    type: 'button' | 'submit' | 'reset';
     icon?: IconName;
-    iconColor?: string;
-    iconSize?: number;
-    iconRight?: IconName;
-    noHover: boolean;
-    sdClass: string;
+    rightIcon?: IconName;
+    ariaLabel: string;
+    disabled: boolean;
+    type: ButtonType;
     click: EventEmitter<MouseEvent>;
+    private hasWarnedMissingAriaLabel;
     private handleClick;
+    private get resolvedName();
+    private get resolvedConfig();
     private getButtonClasses;
+    componentWillRender(): void;
+    private warnIfMissingAriaLabel;
     render(): any;
 }

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.config.d.ts

@@ -1,5 +1,5 @@
 import type { TagName } from '../sd-tag/sd-tag.config';
-import type { ButtonV2Name } from '../sd-button-v2/sd-button-v2.config';
+import type { ButtonName } from '../sd-button/sd-button.config';
 export type ConfirmModalType = 'positive' | 'negative' | 'default';
 export type PositiveMainButton = 'primary_md' | 'primary_outline_md';
 export type NegativeMainButton = 'danger_md' | 'danger_outline_md';
@@ -9,5 +9,5 @@ export declare const CONFIRM_MODAL_DEFAULT_BUTTON: Record<ConfirmModalType, Conf
 export declare const CONFIRM_MODAL_ICON_MAP: Record<ConfirmModalType, IconName | null>;
 export declare const CONFIRM_MODAL_ICON_COLOR: Record<ConfirmModalType, string>;
 export declare const TITLE_ICON_SIZE: number;
-export declare const SUB_BUTTON_PRESET: ButtonV2Name;
-export type { TagName, ButtonV2Name };
+export declare const SUB_BUTTON_PRESET: ButtonName;
+export type { TagName, ButtonName };