@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -12,14 +12,46 @@ export 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: {
@@ -29,7 +61,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: +tagTokens.tag.xs.icon,
         radius: `${tagTokens.tag.xs.radius}px`,
     },
     sm: {
@@ -39,7 +71,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: +tagTokens.tag.sm.icon,
         radius: `${tagTokens.tag.sm.radius}px`,
     },
     md: {
@@ -49,7 +81,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: +tagTokens.tag.md.icon,
         radius: `${tagTokens.tag.md.radius}px`,
     },
 };

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

@@ -5,21 +5,27 @@ export class SdTag {
     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,
@@ -29,7 +35,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '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));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {
@@ -96,7 +102,7 @@ export class SdTag {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",

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

@@ -9,6 +9,7 @@ sd-text-link .sd-text-link {
   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);
 }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { TEXT_LINK_LAYOUT, TEXT_LINK_TYPOGRAPHY, TEXT_LINK_COLORS } from "./sd-text-link.config";
+import { TEXT_LINK_COLORS, TEXT_LINK_LAYOUT, TEXT_LINK_TYPOGRAPHY } from "./sd-text-link.config";
 export class SdTextLink {
     label = '';
     icon = '';
@@ -23,19 +23,25 @@ export class SdTextLink {
         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 })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {

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

@@ -25,4 +25,7 @@ sd-textarea .sd-textarea__content .sd-textarea__native::placeholder {
 sd-textarea .sd-textarea__content .sd-textarea__native:disabled {
   cursor: not-allowed;
   color: var(--sd-textarea-disabled-color);
+}
+sd-textarea .sd-textarea__content .sd-textarea__native[readonly] {
+  color: var(--sd-system-color-field-text-read-only);
 }

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

@@ -105,7 +105,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: 'ca7dc6c13d22ba43cd99ee1e976599d7efb1eceb', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'a36ffabff714596bf780f2a63ccfde3e02eadda7', class: "sd-textarea__content" }, h("textarea", { key: 'b7f8a55b7ee4dfc394c380a97e21c6cc34d12b9b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: '64595853405ae2a66231229516e93a74a4340ef0', 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, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'b7cddedc733c83d4c50234559c02c5f220634008', class: "sd-textarea__content" }, h("textarea", { key: '2d1b852e6ba7b913901c07fce36ce30598f15e12', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {
@@ -511,7 +511,7 @@ export class SdTextarea {
                 "mutable": false,
                 "complexType": {
                     "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",

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

@@ -1,10 +1,24 @@
 import toastTokens from "../../tokens/generated/component.toast.json";
+export 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',
+};
 export 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,
+    },
 };
 export const TOAST_LAYOUT = {
     radius: toastTokens.toast.radius,

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

@@ -26,18 +26,19 @@ sd-toast .sd-toast__content {
 sd-toast .sd-toast__message {
   font-size: 14px;
   line-height: 24px;
-  font-weight: 700;
+  font-weight: 500;
   white-space: nowrap;
 }
 sd-toast .sd-toast__link {
   font-size: 14px;
   line-height: 24px;
   font-weight: 700;
-  color: var(--sd-toast-text);
+  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;
@@ -45,9 +46,6 @@ sd-toast .sd-toast__link:hover {
 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;
 }

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

@@ -1,20 +1,28 @@
 import { h } from "@stencil/core";
-import { TOAST_TYPE_CONFIG, TOAST_LAYOUT } from "./sd-toast.config";
+import { TOAST_TYPE_CONFIG, TOAST_LAYOUT, TOAST_BUTTON_NAME_BY_TYPE, } from "./sd-toast.config";
 export class SdToast {
     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() })))));
     }
     static get is() { return "sd-toast"; }
     static get originalStyleUrls() {
@@ -34,7 +42,7 @@ export class SdToast {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -110,6 +118,25 @@ export class SdToast {
                 "reflect": false,
                 "attribute": "link-label"
             },
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-label"
+            },
             "useClose": {
                 "type": "boolean",
                 "mutable": false,
@@ -135,7 +162,7 @@ export class SdToast {
                 "mutable": false,
                 "complexType": {
                     "original": "ToastType",
-                    "resolved": "\"accent\" | \"caution\" | \"complete\" | \"danger\" | \"default\"",
+                    "resolved": "\"accent\" | \"caution\" | \"complete\" | \"danger\" | \"default\" | \"info\"",
                     "references": {
                         "ToastType": {
                             "location": "import",
@@ -175,6 +202,26 @@ export class SdToast {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "buttonClick",
+                "name": "sdButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
             }];
     }
 }

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

@@ -85,12 +85,12 @@ export class SdToastContainer {
         }
     }
     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();
@@ -216,7 +216,7 @@ export class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: '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: () => {
@@ -232,7 +232,7 @@ export class SdToastContainer {
                 }, 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) })));
         })));
     }
     static get is() { return "sd-toast-container"; }

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

@@ -45,7 +45,7 @@ export class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: '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 })));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

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

@@ -10,9 +10,11 @@ export class SdTooltip {
     icon = 'helpOutline';
     iconSize = 12;
     label = '';
-    buttonSize = 'sm';
-    buttonVariant = 'primary';
-    noHover = true;
+    name = 'primary_sm';
+    rightIcon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
     sdClass = '';
     showTooltip = false;
     slotContentHTML = '';
@@ -79,16 +81,17 @@ export class SdTooltip {
             onMouseLeave: () => this.startHideTimer(),
         };
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
-        const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
-        const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: '9e14a4013ea6d04a37529cf7afdb10fe4b3d98eb' }, h("div", { key: 'd98396d4440a795e59b0d2fede7381f8e0da7280', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '59d42ad7aafd94fbe89fc5af3bddf5a305e13a4c', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '88a927d2c3461c7c68865262e8565d0d1385e9af', ref: el => (this.menuEl = el), class: {
+        const hasLabel = this.label !== undefined && this.label !== '';
+        const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
+        const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
+        return (h(Fragment, { key: 'cd01d5f5e9c1c542268d455d97b1bdfe1a2eef2c' }, h("div", { key: '2b883efa4f4ea16b2a544fc43059a139f68e32c1', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '4d69c1582c3a2fab1fae2e29a4b41999d5dded95', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '8e94b33ba40231b26174b28a63d7748649f4d729', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'eb2bcb4e6faa2066e309b662f372fbf8bef42a3e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'f13005f88ef3194d43de72a87ee78f2c0858682e' })), h("div", { key: '726aff3af3603593d0b994ee17ba88cec071868a', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '535deacc918ec41135ff1c1e24ea5b32b59a4b54', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'c2c70e6360e78f7287acd40a815c558610bf66fa' })), h("div", { key: '9569fbe5648df9c74e7d00b28f91fe8dfa6f6df3', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {
@@ -195,7 +198,7 @@ export class SdTooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -255,18 +258,18 @@ export class SdTooltip {
                 "attribute": "label",
                 "defaultValue": "''"
             },
-            "buttonSize": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonSize",
-                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "original": "ButtonName",
+                    "resolved": "\"danger_lg\" | \"danger_md\" | \"danger_outline_lg\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_outline_lg\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"primary_lg\" | \"primary_md\" | \"primary_outline_lg\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_lg\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
                     "references": {
-                        "ButtonSize": {
+                        "ButtonName": {
                             "location": "import",
-                            "path": "../sd-button/sd-button",
-                            "id": "src/components/sd-button/sd-button.tsx::ButtonSize",
-                            "referenceLocation": "ButtonSize"
+                            "path": "../sd-button/sd-button.config",
+                            "id": "src/components/sd-button/sd-button.config.ts::ButtonName",
+                            "referenceLocation": "ButtonName"
                         }
                     }
                 },
@@ -279,25 +282,42 @@ export class SdTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "button-size",
-                "defaultValue": "'sm'"
+                "attribute": "name",
+                "defaultValue": "'primary_sm'"
             },
-            "buttonVariant": {
+            "rightIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonVariant",
-                    "resolved": "\"ghost\" | \"outline\" | \"primary\"",
+                    "original": "IconName",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
-                        "ButtonVariant": {
-                            "location": "import",
-                            "path": "../sd-button/sd-button",
-                            "id": "src/components/sd-button/sd-button.tsx::ButtonVariant",
-                            "referenceLocation": "ButtonVariant"
+                        "IconName": {
+                            "location": "global",
+                            "id": "global::IconName"
                         }
                     }
                 },
                 "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-icon"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -306,10 +326,10 @@ export class SdTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "button-variant",
-                "defaultValue": "'primary'"
+                "attribute": "aria-label",
+                "defaultValue": "''"
             },
-            "noHover": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -326,8 +346,35 @@ export class SdTooltip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "no-hover",
-                "defaultValue": "true"
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "ButtonType": {
+                            "location": "import",
+                            "path": "../sd-button/sd-button.config",
+                            "id": "src/components/sd-button/sd-button.config.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
             },
             "sdClass": {
                 "type": "string",