@sellmate/design-system 1.13.0 → 1.15.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-erbAlKp-.js');
+var index = require('./index-Dq1M20nt.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdSelect_config = require('./sd-select.config-DrJ4LNVz.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
@@ -21,6 +21,7 @@ const SdSelect = class {
     value = null;
     options = [];
     placeholder = '선택';
+    dropdownWidth = '';
     maxDropdownWidth = '640px';
     dropdownHeight = '260px';
     disabled = false;
@@ -265,15 +266,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (index.h("sd-field", { key: 'd3c3175067494715963592806a150bebadd8970c', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (index.h("sd-field", { key: '29ea3526b5ef4a6f64bac810204cb7862a184503', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, index.h("div", { key: 'c291b661a968375c341d26ac48f7ff7fd4947e3e', class: "sd-select", ref: el => {
+            } }, index.h("div", { key: 'e23ef16cf8af59d2e9dd6ee39a297c4338e0a056', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-select-trigger", { key: '45da184f72f989d9c6be05479fec7a616f168ddf', ref: el => {
+            } }, index.h("sd-select-trigger", { key: 'b6811644cb571bb738d604ce31b233ff76a32d16', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'bd7a612cf9ef74e157336a8de0170cebb61074dc', ...portalProps }, index.h("sd-select-listbox", { key: '8117fab3ef6b2f5f77e74a234c6b21dfc2549df1', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'b9b191bd7eefcb4d69be21f51740dd1cd993a3e7', ...portalProps }, index.h("sd-select-listbox", { key: 'f04d988c8491eeea284dc4fdce91dadfd33965f8', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{

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-select/sd-select.js

@@ -9,6 +9,7 @@ export class SdSelect {
     value = null;
     options = [];
     placeholder = '선택';
+    dropdownWidth = '';
     maxDropdownWidth = '640px';
     dropdownHeight = '260px';
     disabled = false;
@@ -253,15 +254,15 @@ export class SdSelect {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'd3c3175067494715963592806a150bebadd8970c', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: '29ea3526b5ef4a6f64bac810204cb7862a184503', 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: 'c291b661a968375c341d26ac48f7ff7fd4947e3e', class: "sd-select", ref: el => {
+            } }, h("div", { key: 'e23ef16cf8af59d2e9dd6ee39a297c4338e0a056', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '45da184f72f989d9c6be05479fec7a616f168ddf', ref: el => {
+            } }, h("sd-select-trigger", { key: 'b6811644cb571bb738d604ce31b233ff76a32d16', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'bd7a612cf9ef74e157336a8de0170cebb61074dc', ...portalProps }, h("sd-select-listbox", { key: '8117fab3ef6b2f5f77e74a234c6b21dfc2549df1', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'b9b191bd7eefcb4d69be21f51740dd1cd993a3e7', ...portalProps }, h("sd-select-listbox", { key: 'f04d988c8491eeea284dc4fdce91dadfd33965f8', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get is() { return "sd-select"; }
     static get originalStyleUrls() {
@@ -375,6 +376,26 @@ export class SdSelect {
                 "attribute": "placeholder",
                 "defaultValue": "'\uC120\uD0DD'"
             },
+            "dropdownWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-width",
+                "defaultValue": "''"
+            },
             "maxDropdownWidth": {
                 "type": "string",
                 "mutable": false,

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);
 }