@sellmate/design-system 1.13.0 → 1.14.0

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.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
          */
@@ -4911,6 +4917,10 @@ declare namespace LocalJSX {
           * @default 'none'
          */
         "rightArrow"?: 'none' | 'chevron' | 'caret';
+        /**
+          * @default 'sm'
+         */
+        "size"?: TextLinkSize;
         /**
           * @default false
          */
@@ -5636,6 +5646,7 @@ declare namespace LocalJSX {
         "rightArrow": 'none' | 'chevron' | 'caret';
         "underline": boolean;
         "disabled": boolean;
+        "size": TextLinkSize;
     }
     interface SdTextareaAttributes {
         "value": string | null;