@sellmate/design-system 1.12.0 → 1.14.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
+import { r as registerInstance, c as createEvent, h } from './index-JGOJoT-i.js';
 
 var switchTokens = {
 	"switch": {
@@ -8,7 +8,8 @@ var switchTokens = {
 	radius: "9999",
 	knob: {
 		size: "16",
-		bg: "#FFFFFF"
+		"default": "#FFFFFF",
+		disabled: "#EEEEEE"
 	},
 	bg: {
 		on: "#0075FF",
@@ -40,7 +41,8 @@ const SWITCH_LAYOUT = {
     gap: Number(switchTokens.switch.gap),
 };
 const SWITCH_COLORS = {
-    knobBg: switchTokens.switch.knob.bg,
+    knobDefault: switchTokens.switch.knob.default,
+    knobDisabled: switchTokens.switch.knob.disabled,
     bgOn: switchTokens.switch.bg.on,
     bgOff: switchTokens.switch.bg.off,
     bgDisabledOn: switchTokens.switch.bg.disabled.on,
@@ -54,7 +56,7 @@ const SWITCH_TYPOGRAPHY = {
     textDecoration: switchTokens.switch.label.typography.textDecoration,
 };
 
-const sdSwitchCss = () => `sd-switch{display:inline-block;line-height:0}sd-switch .sd-switch{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-switch-gap)}sd-switch .sd-switch>input{display:none}sd-switch .sd-switch__track{position:relative;width:var(--sd-switch-track-width);height:var(--sd-switch-track-height);border-radius:var(--sd-switch-track-radius);background:var(--sd-switch-bg-off);transition:background-color 0.2s ease}sd-switch .sd-switch__knob{position:absolute;top:var(--sd-switch-track-padding);left:var(--sd-switch-track-padding);width:var(--sd-switch-knob-size);height:var(--sd-switch-knob-size);border-radius:50%;background:var(--sd-switch-knob-bg);box-shadow:0 2px 4px rgba(0, 0, 0, 0.16);transition:transform 0.2s ease}sd-switch .sd-switch__label{font-family:var(--sd-switch-font-family);font-weight:var(--sd-switch-font-weight);font-size:var(--sd-switch-font-size);line-height:var(--sd-switch-line-height);text-decoration:var(--sd-switch-text-decoration)}sd-switch .sd-switch--on .sd-switch__track{background:var(--sd-switch-bg-on)}sd-switch .sd-switch--on .sd-switch__knob{transform:translateX(var(--sd-switch-knob-offset))}sd-switch .sd-switch--disabled{cursor:not-allowed}sd-switch .sd-switch--disabled.sd-switch--on .sd-switch__track{background:var(--sd-switch-bg-disabled-on)}sd-switch .sd-switch--disabled.sd-switch--off .sd-switch__track{background:var(--sd-switch-bg-disabled-off)}`;
+const sdSwitchCss = () => `sd-switch{display:inline-block;line-height:0}sd-switch .sd-switch{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-switch-gap)}sd-switch .sd-switch>input{display:none}sd-switch .sd-switch__track{position:relative;width:var(--sd-switch-track-width);height:var(--sd-switch-track-height);border-radius:var(--sd-switch-track-radius);background:var(--sd-switch-bg-off);transition:background-color 0.2s ease}sd-switch .sd-switch__knob{position:absolute;top:var(--sd-switch-track-padding);left:var(--sd-switch-track-padding);width:var(--sd-switch-knob-size);height:var(--sd-switch-knob-size);border-radius:50%;background:var(--sd-switch-knob-default);box-shadow:0 2px 4px rgba(0, 0, 0, 0.16);transition:transform 0.2s ease}sd-switch .sd-switch__label{font-family:var(--sd-switch-font-family);font-weight:var(--sd-switch-font-weight);font-size:var(--sd-switch-font-size);line-height:var(--sd-switch-line-height);text-decoration:var(--sd-switch-text-decoration)}sd-switch .sd-switch--on .sd-switch__track{background:var(--sd-switch-bg-on)}sd-switch .sd-switch--on .sd-switch__knob{transform:translateX(var(--sd-switch-knob-offset))}sd-switch .sd-switch--disabled{cursor:not-allowed}sd-switch .sd-switch--disabled .sd-switch__knob{background:var(--sd-switch-knob-disabled)}sd-switch .sd-switch--disabled.sd-switch--on .sd-switch__track{background:var(--sd-switch-bg-disabled-on)}sd-switch .sd-switch--disabled.sd-switch--off .sd-switch__track{background:var(--sd-switch-bg-disabled-off)}`;
 
 const SdSwitch = class {
     constructor(hostRef) {
@@ -88,7 +90,8 @@ const SdSwitch = class {
             '--sd-switch-track-radius': `${SWITCH_LAYOUT.radius}px`,
             '--sd-switch-knob-size': `${SWITCH_LAYOUT.knobSize}px`,
             '--sd-switch-knob-offset': `${knobOffset}px`,
-            '--sd-switch-knob-bg': SWITCH_COLORS.knobBg,
+            '--sd-switch-knob-default': SWITCH_COLORS.knobDefault,
+            '--sd-switch-knob-disabled': SWITCH_COLORS.knobDisabled,
             '--sd-switch-bg-on': SWITCH_COLORS.bgOn,
             '--sd-switch-bg-off': SWITCH_COLORS.bgOff,
             '--sd-switch-bg-disabled-on': SWITCH_COLORS.bgDisabledOn,
@@ -100,7 +103,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '70b779b6d8fc42e94110d7fb9d88aba22290af3a', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '41281a03161608ce507dd14c8a2a5a47063556ca', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '0c712f35c9594380b666a03387f0563cfcb1257d', class: "sd-switch__track" }, h("div", { key: 'a96915c01e3a33017d9024e1aea9cd8f50fdd933', class: "sd-switch__knob" })), this.label && h("span", { key: '51d9d2f4a7072cb288ce4257df825ad2d9053f35', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-D3yCWQNg.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-JGOJoT-i.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 import { T as TABLE_BODY_LAYOUT, a as TABLE_SELECTABLE_COLUMN_WIDTH, b as TABLE_BODY_TYPOGRAPHY, c as TABLE_BORDER, d as TABLE_RADIUS } from './sd-table.config-D9meRqTx.js';
 import './component.table-D6GUzecR.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
+import { r as registerInstance, c as createEvent, h } from './index-JGOJoT-i.js';
 
 const tab = {
 	main: {

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-D3yCWQNg.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-JGOJoT-i.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}`;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
+import { r as registerInstance, c as createEvent, h } from './index-JGOJoT-i.js';
 
 const textLink = {
 	sm: {
@@ -6,11 +6,39 @@ const textLink = {
 		icon: "16",
 		typography: {
 			"default": {
+				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",
 				fontSize: "12",
-				textDecoration: "none"},
+				fontWeight: "500",
+				textDecoration: "none",
+				lineHeight: "20"
+			},
 			underline: {
+				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",
 				fontSize: "12",
-				textDecoration: "underline"}
+				fontWeight: "500",
+				textDecoration: "underline",
+				lineHeight: "20"
+			}
+		}
+	},
+	md: {
+		gap: "8",
+		icon: "16",
+		typography: {
+			"default": {
+				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",
+				fontSize: "14",
+				fontWeight: "500",
+				textDecoration: "none",
+				lineHeight: "24"
+			},
+			underline: {
+				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",
+				fontSize: "14",
+				fontWeight: "500",
+				textDecoration: "underline",
+				lineHeight: "24"
+			}
 		}
 	},
 	content: {
@@ -19,29 +47,69 @@ const textLink = {
 	icon: {
 		"default": "#006AC1",
 		disabled: "#BBBBBB"
+	},
+	lg: {
+		typography: {
+			"default": {
+				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",
+				fontSize: "16",
+				fontWeight: "500",
+				textDecoration: "none",
+				lineHeight: "26"
+			},
+			underline: {
+				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",
+				fontSize: "16",
+				fontWeight: "500",
+				textDecoration: "underline",
+				lineHeight: "26"
+			}
+		},
+		gap: "8",
+		icon: "20"
 	}
 };
 var textLinkTokens = {
 	textLink: textLink
 };
 
-const TEXT_LINK_LAYOUT = {
-    gap: textLinkTokens.textLink.sm.gap,
-    iconSize: Number(textLinkTokens.textLink.sm.icon),
+const TEXT_LINK_SIZE_CONFIG = {
+    sm: {
+        gap: Number(textLinkTokens.textLink.sm.gap),
+        iconSize: Number(textLinkTokens.textLink.sm.icon),
+        typography: {
+            default: textLinkTokens.textLink.sm.typography.default,
+            underline: textLinkTokens.textLink.sm.typography.underline,
+        },
+    },
+    md: {
+        gap: Number(textLinkTokens.textLink.md.gap),
+        iconSize: Number(textLinkTokens.textLink.md.icon),
+        typography: {
+            default: textLinkTokens.textLink.md.typography.default,
+            underline: textLinkTokens.textLink.md.typography.underline,
+        },
+    },
+    lg: {
+        gap: Number(textLinkTokens.textLink.lg.gap),
+        iconSize: Number(textLinkTokens.textLink.lg.icon),
+        typography: {
+            default: textLinkTokens.textLink.lg.typography.default,
+            underline: textLinkTokens.textLink.lg.typography.underline,
+        },
+    },
+};
+const TEXT_LINK_ARROW = {
     arrowFrame: 16, // TODO: 토큰 반영 후 교체
     arrowIconSize: 12, // TODO: 토큰 반영 후 교체
     arrowColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
 };
-const TEXT_LINK_TYPOGRAPHY = {
-    default: textLinkTokens.textLink.sm.typography.default,
-    underline: textLinkTokens.textLink.sm.typography.underline,
-};
 const TEXT_LINK_COLORS = {
     content: textLinkTokens.textLink.content,
     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{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 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);line-height:var(--sd-text-link-line-height, 20px);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) {
@@ -55,6 +123,7 @@ const SdTextLink = class {
     rightArrow = 'none';
     underline = false;
     disabled = false;
+    size = 'sm';
     click;
     handleClick = () => {
         if (this.disabled)
@@ -62,19 +131,21 @@ const SdTextLink = class {
         this.click.emit();
     };
     render() {
-        const typo = this.underline ? TEXT_LINK_TYPOGRAPHY.underline : TEXT_LINK_TYPOGRAPHY.default;
+        const sizeConfig = TEXT_LINK_SIZE_CONFIG[this.size];
+        const typo = this.underline ? sizeConfig.typography.underline : sizeConfig.typography.default;
         const labelClassName = ['sd-text-link__label', this.labelClass].filter(Boolean).join(' ');
         const iconColor = this.disabled
             ? TEXT_LINK_COLORS.icon.disabled
             : this.iconColor || TEXT_LINK_COLORS.icon.default;
-        const arrowColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : TEXT_LINK_LAYOUT.arrowColor;
+        const arrowColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : TEXT_LINK_ARROW.arrowColor;
         const cssVars = {
-            '--sd-text-link-gap': `${TEXT_LINK_LAYOUT.gap}px`,
+            '--sd-text-link-gap': `${sizeConfig.gap}px`,
             '--sd-text-link-font-size': `${typo.fontSize}px`,
+            '--sd-text-link-line-height': `${typo.lineHeight}px`,
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '26955b1626c09a6712b42454c6fb057e3a28a5b5', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("span", { key: '89b8117d19d149faf70d026ef560acdfa0096daa', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -82,13 +153,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (h("sd-icon", { key: 'caa180d6b2cdc054c4c2becc486ac0bb5f1abdf7', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '65940e935169cfc2fabe1b52ec8a70111f726519', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (h("span", { key: 'e7c988784da2b38087f35a209f9bd912b742a688', class: "sd-text-link__arrow", style: {
-                width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
-                height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
+            } }, this.icon && (h("sd-icon", { key: '684c7b31abc6cb806944c03a016c4520c4721a7c', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '272f5b4c889b099ede7b5146ea4828648d89ad69', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (h("span", { key: '142d37f856df2e5858df5d976e4d8ac4ee2f2607', class: "sd-text-link__arrow", style: {
+                width: `${TEXT_LINK_ARROW.arrowFrame}px`,
+                height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '29da741e45513a6d33876c4ed4316cb6d6418266', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: '5da12b6077fb33912260b353cb6fe7d533eab937', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.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-D3yCWQNg.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-JGOJoT-i.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
+import { r as registerInstance, c as createEvent, h } from './index-JGOJoT-i.js';
 
 const toast = {
 	icon: "16",

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

@@ -1,14 +1,14 @@
-import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
+import { r as registerInstance, c as createEvent, h } from './index-JGOJoT-i.js';
 
 const toggle = {
 	height: "28",
 	paddingX: "12",
 	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",
-		fontSize: "12",
+		fontSize: "14",
 		fontWeight: "500",
 		textDecoration: "none",
-		lineHeight: "20"
+		lineHeight: "24"
 	},
 	radius: "9999",
 	border: {

package/dist/esm/{tooltipArrow-CUCfrch1.js → tooltipArrow-jis_5jgG.js}

@@ -1,4 +1,4 @@
-import { h } from './index-D3yCWQNg.js';
+import { h } from './index-JGOJoT-i.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/sd-floating-portal/sd-floating-portal.d.ts

@@ -14,6 +14,7 @@ export declare class SdFloatingPopover {
     private isInsideClick;
     private resizeObserver?;
     private mutationObserver?;
+    private scrollHandler;
     private static readonly ARROW_SIZE;
     componentDidLoad(): void;
     componentDidRender(): void;

package/dist/types/components/sd-switch/sd-switch.config.d.ts

@@ -7,7 +7,8 @@ export declare const SWITCH_LAYOUT: {
     gap: number;
 };
 export declare const SWITCH_COLORS: {
-    knobBg: string;
+    knobDefault: string;
+    knobDisabled: string;
     bgOn: string;
     bgOff: string;
     bgDisabledOn: string;

package/dist/types/components/sd-text-link/sd-text-link.config.d.ts

@@ -1,26 +1,18 @@
-export declare const TEXT_LINK_LAYOUT: {
-    gap: string;
+import textLinkTokens from '../../tokens/generated/component.textLink.json';
+export type TextLinkSize = 'sm' | 'md' | 'lg';
+export declare const TEXT_LINK_SIZE_CONFIG: Record<TextLinkSize, {
+    gap: number;
     iconSize: number;
+    typography: {
+        default: (typeof textLinkTokens.textLink.sm.typography)['default'];
+        underline: (typeof textLinkTokens.textLink.sm.typography)['underline'];
+    };
+}>;
+export declare const TEXT_LINK_ARROW: {
     arrowFrame: number;
     arrowIconSize: number;
     arrowColor: string;
 };
-export declare const TEXT_LINK_TYPOGRAPHY: {
-    default: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: string;
-        textDecoration: string;
-        lineHeight: string;
-    };
-    underline: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: string;
-        textDecoration: string;
-        lineHeight: string;
-    };
-};
 export declare const TEXT_LINK_COLORS: {
     content: {
         default: string;

package/dist/types/components/sd-text-link/sd-text-link.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { type TextLinkSize } from './sd-text-link.config';
 export declare class SdTextLink {
     label: string;
     icon: string;
@@ -7,6 +8,7 @@ export declare class SdTextLink {
     rightArrow: 'none' | 'chevron' | 'caret';
     underline: boolean;
     disabled: boolean;
+    size: TextLinkSize;
     click: EventEmitter<void>;
     private handleClick;
     render(): any;

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

@@ -16,9 +16,20 @@ export declare class SdTooltip {
     type: ButtonType;
     useClose: boolean;
     sdClass?: string;
+    /**
+     * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다.
+     * (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+     */
+    message: string[];
+    /** anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`) */
+    triggerClass: string;
+    /** anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`) */
+    triggerStyle: string;
     showTooltip: boolean;
     slotContentHTML: string;
     private buttonEl?;
+    private triggerEl?;
+    private isAnchorMode;
     private menuEl?;
     private hideTimeout?;
     private closeTimeout?;
@@ -34,5 +45,6 @@ export declare class SdTooltip {
     /** 툴팁을 숨깁니다. */
     hide(): Promise<void>;
     componentWillLoad(): void;
+    componentDidRender(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -43,6 +43,7 @@ import { SelectOption, SelectOptionSelectDetail, SelectType, SelectValue } from
 import { Row, SdTableColumn, SdTablePagination, SdTableStickyColumn, SelectOption as SelectOption1 } from "./components/sd-table/constants";
 import { TabOption, TabSize } from "./components/sd-tabs/sd-tabs.config";
 import { TagName as TagName1 } from "./components/sd-tag/sd-tag.config";
+import { TextLinkSize } from "./components/sd-text-link/sd-text-link.config";
 import { ToastType } from "./components/sd-toast/sd-toast.config";
 import { ToastEntry, ToastNotifyOptions, ToastPosition } from "./components/sd-toast-container/sd-toast-container.config";
 export { ButtonName, ButtonProps, ButtonType } from "./components/sd-button/sd-button.config";
@@ -83,6 +84,7 @@ export { SelectOption, SelectOptionSelectDetail, SelectType, SelectValue } from
 export { Row, SdTableColumn, SdTablePagination, SdTableStickyColumn, SelectOption as SelectOption1 } from "./components/sd-table/constants";
 export { TabOption, TabSize } from "./components/sd-tabs/sd-tabs.config";
 export { TagName as TagName1 } from "./components/sd-tag/sd-tag.config";
+export { TextLinkSize } from "./components/sd-text-link/sd-text-link.config";
 export { ToastType } from "./components/sd-toast/sd-toast.config";
 export { ToastEntry, ToastNotifyOptions, ToastPosition } from "./components/sd-toast-container/sd-toast-container.config";
 export namespace Components {
@@ -1793,6 +1795,10 @@ export namespace Components {
           * @default 'none'
          */
         "rightArrow": 'none' | 'chevron' | 'caret';
+        /**
+          * @default 'sm'
+         */
+        "size": TextLinkSize;
         /**
           * @default false
          */
@@ -1999,6 +2005,11 @@ export namespace Components {
           * @default ''
          */
         "label": string;
+        /**
+          * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다. (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+          * @default []
+         */
+        "message": string[];
         /**
           * @default 'primary_sm'
          */
@@ -2024,6 +2035,16 @@ export namespace Components {
           * @default 'hover'
          */
         "trigger": 'hover' | 'click';
+        /**
+          * anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`)
+          * @default ''
+         */
+        "triggerClass": string;
+        /**
+          * anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`)
+          * @default ''
+         */
+        "triggerStyle": string;
         /**
           * @default 'button'
          */
@@ -4896,6 +4917,10 @@ declare namespace LocalJSX {
           * @default 'none'
          */
         "rightArrow"?: 'none' | 'chevron' | 'caret';
+        /**
+          * @default 'sm'
+         */
+        "size"?: TextLinkSize;
         /**
           * @default false
          */
@@ -5096,6 +5121,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "label"?: string;
+        /**
+          * 툴팁 본문에 표시할 메시지. 각 항목이 한 줄로 innerHTML 렌더링됩니다. (HTML 문자열 허용) 지정하지 않으면 slot 으로 전달한 내용을 본문으로 사용합니다.
+          * @default []
+         */
+        "message"?: string[];
         /**
           * @default 'primary_sm'
          */
@@ -5117,6 +5147,16 @@ declare namespace LocalJSX {
           * @default 'hover'
          */
         "trigger"?: 'hover' | 'click';
+        /**
+          * anchor 트리거 래퍼(.sd-tooltip-trigger)에 추가할 클래스. (예: Tailwind `block w-full`)
+          * @default ''
+         */
+        "triggerClass"?: string;
+        /**
+          * anchor 트리거 래퍼에 적용할 인라인 스타일(CSS 문자열). (예: `width:100%`)
+          * @default ''
+         */
+        "triggerStyle"?: string;
         /**
           * @default 'button'
          */
@@ -5606,6 +5646,7 @@ declare namespace LocalJSX {
         "rightArrow": 'none' | 'chevron' | 'caret';
         "underline": boolean;
         "disabled": boolean;
+        "size": TextLinkSize;
     }
     interface SdTextareaAttributes {
         "value": string | null;
@@ -5673,6 +5714,8 @@ declare namespace LocalJSX {
         "type": ButtonType;
         "useClose": boolean;
         "sdClass": string;
+        "triggerClass": string;
+        "triggerStyle": string;
     }
     interface SdTrAttributes {
         "selectable": boolean;