@sellmate/design-system 1.13.0 → 1.14.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.js');
 
 var switchTokens = {
 	"switch": {
@@ -10,7 +10,8 @@ var switchTokens = {
 	radius: "9999",
 	knob: {
 		size: "16",
-		bg: "#FFFFFF"
+		"default": "#FFFFFF",
+		disabled: "#EEEEEE"
 	},
 	bg: {
 		on: "#0075FF",
@@ -42,7 +43,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,
@@ -56,7 +58,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) {
@@ -90,7 +92,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,
@@ -102,7 +105,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (index.h("label", { key: '54ebe92b29a80537e2e4380ffe096a252f883d10', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: 'd18abbbf293434f07ae7dfa18b983b47cac1b774', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '76fef910e632b541c0b33c508e6001529df5614f', class: "sd-switch__track" }, index.h("div", { key: 'a66f4ecca5787f00febe19216a93ec62916e0541', class: "sd-switch__knob" })), this.label && index.h("span", { key: '948d2b7afc6e171ee329752cb85f8e361f6bbed8', class: "sd-switch__label" }, this.label)));
+        return (index.h("label", { key: '70b779b6d8fc42e94110d7fb9d88aba22290af3a', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, index.h("input", { key: '41281a03161608ce507dd14c8a2a5a47063556ca', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), index.h("div", { key: '0c712f35c9594380b666a03387f0563cfcb1257d', class: "sd-switch__track" }, index.h("div", { key: 'a96915c01e3a33017d9024e1aea9cd8f50fdd933', class: "sd-switch__knob" })), this.label && index.h("span", { key: '51d9d2f4a7072cb288ce4257df825ad2d9053f35', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.js');
 var constants = require('./constants-DJRV1upE.js');
 var sdTable_config = require('./sd-table.config-BjJW74Zx.js');
 require('./component.table-DIxmbGBT.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.js');
 
 const tab = {
 	main: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.js');
 
 const textLink = {
 	sm: {
@@ -8,11 +8,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: {
@@ -21,29 +49,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) {
@@ -57,6 +125,7 @@ const SdTextLink = class {
     rightArrow = 'none';
     underline = false;
     disabled = false;
+    size = 'sm';
     click;
     handleClick = () => {
         if (this.disabled)
@@ -64,19 +133,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 (index.h("span", { key: '26955b1626c09a6712b42454c6fb057e3a28a5b5', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.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 => {
@@ -84,13 +155,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, this.icon && (index.h("sd-icon", { key: 'caa180d6b2cdc054c4c2becc486ac0bb5f1abdf7', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '65940e935169cfc2fabe1b52ec8a70111f726519', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: 'e7c988784da2b38087f35a209f9bd912b742a688', class: "sd-text-link__arrow", style: {
-                width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
-                height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
+            } }, this.icon && (index.h("sd-icon", { key: '684c7b31abc6cb806944c03a016c4520c4721a7c', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '272f5b4c889b099ede7b5146ea4828648d89ad69', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.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',
-            } }, index.h("sd-icon", { key: '29da741e45513a6d33876c4ed4316cb6d6418266', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '5da12b6077fb33912260b353cb6fe7d533eab937', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.js');
 
 const toast = {
 	icon: "16",

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

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.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/cjs/{tooltipArrow-CYf_WBPN.js → tooltipArrow-CyyaX9aS.js}

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

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -14,6 +14,7 @@ export class SdFloatingPopover {
     isInsideClick = false;
     resizeObserver;
     mutationObserver;
+    scrollHandler = () => this.updatePosition();
     static ARROW_SIZE = 11.2;
     componentDidLoad() {
         this.container = this.resolveContainer();
@@ -27,6 +28,7 @@ export class SdFloatingPopover {
             }
         });
         this.observeParent();
+        window.addEventListener('scroll', this.scrollHandler, true);
     }
     componentDidRender() {
         if (!this.wrapper)
@@ -51,6 +53,7 @@ export class SdFloatingPopover {
     disconnectedCallback() {
         if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
+        window.removeEventListener('scroll', this.scrollHandler, true);
         this.unobserveParent();
         this.wrapper?.remove();
     }
@@ -61,7 +64,7 @@ export class SdFloatingPopover {
     createWrapper() {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
-            position: 'absolute',
+            position: 'fixed',
             zIndex: (this.zIndex ?? 998).toString(),
             transition: 'opacity 0.4s',
             top: '-9999px',
@@ -75,7 +78,7 @@ export class SdFloatingPopover {
         const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
         nodes.forEach(n => this.wrapper.appendChild(n));
     }
-    // 위치 갱신 (scroll / resize)
+    // 위치 갱신 (resize)
     updatePosition() {
         if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
@@ -91,24 +94,20 @@ export class SdFloatingPopover {
             let left = 0;
             switch (this.placement ?? 'bottom') {
                 case 'top':
-                    top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
-                    left =
-                        rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    top = rect.top - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
+                    left = rect.left + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
                     break;
                 case 'bottom':
-                    top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
-                    left =
-                        rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    top = rect.bottom + offsetY + ARROW_SIZE;
+                    left = rect.left + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
                     break;
                 case 'left':
-                    top =
-                        rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
-                    left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
+                    top = rect.top + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    left = rect.left - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
                     break;
                 case 'right':
-                    top =
-                        rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
-                    left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
+                    top = rect.top + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    left = rect.right + offsetX + ARROW_SIZE;
                     break;
             }
             Object.assign(this.wrapper.style, {
@@ -153,7 +152,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '7153fca24fbba922c0dd667bc3bf2314a551f750' });
+        return h("slot", { key: '7931b1b9ee17e2de64a7fa87658ec7d4501f7ecd' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {
@@ -317,12 +316,6 @@ export class SdFloatingPopover {
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "scroll",
-                "method": "updatePosition",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }, {
                 "name": "resize",
                 "method": "updatePosition",
                 "target": "window",

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

@@ -8,7 +8,8 @@ export const SWITCH_LAYOUT = {
     gap: Number(switchTokens.switch.gap),
 };
 export 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,

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

@@ -26,7 +26,7 @@ sd-switch .sd-switch__knob {
   width: var(--sd-switch-knob-size);
   height: var(--sd-switch-knob-size);
   border-radius: 50%;
-  background: var(--sd-switch-knob-bg);
+  background: var(--sd-switch-knob-default);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
   transition: transform 0.2s ease;
 }
@@ -46,6 +46,9 @@ sd-switch .sd-switch--on .sd-switch__knob {
 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);
 }

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

@@ -28,7 +28,8 @@ export class SdSwitch {
             '--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,
@@ -40,7 +41,7 @@ export class SdSwitch {
             '--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)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {

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

@@ -1,15 +1,35 @@
 import textLinkTokens from "../../tokens/generated/component.textLink.json";
-export const TEXT_LINK_LAYOUT = {
-    gap: textLinkTokens.textLink.sm.gap,
-    iconSize: Number(textLinkTokens.textLink.sm.icon),
+export 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,
+        },
+    },
+};
+export const TEXT_LINK_ARROW = {
     arrowFrame: 16, // TODO: 토큰 반영 후 교체
     arrowIconSize: 12, // TODO: 토큰 반영 후 교체
     arrowColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
 };
-export const TEXT_LINK_TYPOGRAPHY = {
-    default: textLinkTokens.textLink.sm.typography.default,
-    underline: textLinkTokens.textLink.sm.typography.underline,
-};
 export const TEXT_LINK_COLORS = {
     content: textLinkTokens.textLink.content,
     icon: textLinkTokens.textLink.icon,

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

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

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { TEXT_LINK_COLORS, TEXT_LINK_LAYOUT, TEXT_LINK_TYPOGRAPHY } from "./sd-text-link.config";
+import { TEXT_LINK_ARROW, TEXT_LINK_COLORS, TEXT_LINK_SIZE_CONFIG, } from "./sd-text-link.config";
 export class SdTextLink {
     label = '';
     icon = '';
@@ -8,6 +8,7 @@ export class SdTextLink {
     rightArrow = 'none';
     underline = false;
     disabled = false;
+    size = 'sm';
     click;
     handleClick = () => {
         if (this.disabled)
@@ -15,19 +16,21 @@ export class SdTextLink {
         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 => {
@@ -35,13 +38,13 @@ export class SdTextLink {
                     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 })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {
@@ -195,6 +198,33 @@ export class SdTextLink {
                 "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextLinkSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "TextLinkSize": {
+                            "location": "import",
+                            "path": "./sd-text-link.config",
+                            "id": "src/components/sd-text-link/sd-text-link.config.ts::TextLinkSize",
+                            "referenceLocation": "TextLinkSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
             }
         };
     }