@sellmate/design-system 1.1.0 → 1.3.0

package/dist/cjs/{sd-table.config-CDyioyE2.js → sd-table.config-BIpldZtw.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var component_table = require('./component.table-B7brIpIQ.js');
+var component_table = require('./component.table-CMqGfEui.js');
 var system = require('./system-VmZRYp6V.js');
 
 // ── Header Tokens ──
@@ -26,7 +26,13 @@ const TABLE_HEADER_RESIZING_BAR = {
 // ── Body Tokens ──
 const TABLE_BODY_LAYOUT = {
     default: {
-        height: component_table.tableTokens.table.body.default.height},
+        height: component_table.tableTokens.table.body.default.height,
+        paddingY: component_table.tableTokens.table.body.default.paddingY,
+    },
+    dense: {
+        height: component_table.tableTokens.table.body.dense.height,
+        paddingY: component_table.tableTokens.table.body.dense.paddingY,
+    },
     paddingX: component_table.tableTokens.table.body.paddingX};
 const TABLE_BODY_TYPOGRAPHY = {
     fontFamily: component_table.tableTokens.table.body.typography.fontFamily,
@@ -40,6 +46,10 @@ const TABLE_BORDER = {
     color: component_table.tableTokens.table.border.color,
     width: component_table.tableTokens.table.border.width,
 };
+const TABLE_SEPARATOR = {
+    color: component_table.tableTokens.table.separator.color,
+    width: component_table.tableTokens.table.separator.Width,
+};
 const TABLE_RADIUS = component_table.tableTokens.table.radius;
 // ── Header Icon Color Defaults ──
 const ICON_DEFAULT_COLOR = {
@@ -61,5 +71,6 @@ exports.TABLE_HEADER_LAYOUT = TABLE_HEADER_LAYOUT;
 exports.TABLE_HEADER_RESIZING_BAR = TABLE_HEADER_RESIZING_BAR;
 exports.TABLE_HEADER_TYPOGRAPHY = TABLE_HEADER_TYPOGRAPHY;
 exports.TABLE_RADIUS = TABLE_RADIUS;
+exports.TABLE_SEPARATOR = TABLE_SEPARATOR;
 exports.resolveSortIconName = resolveSortIconName;
 exports.resolveTableIconColor = resolveTableIconColor;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const tab = {
 	main: {
@@ -188,9 +188,14 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: '9578cc6d422a304312f9ebc78622264d20d1fb45', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: '880f1aa80c29f2d578ffe2d5e5e5e0c008c898d3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
-            return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
+            return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.handleTabClick(tab);
+                    }
+                } }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge !== undefined && tab.badge !== null && tab.badge !== '' && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));
     }
     static get watchers() { return {

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

@@ -1,13 +1,12 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const tag = {
 	xs: {
 		height: "20",
 		paddingX: "8",
 		gap: "4",
-		icon: "12",
 		typography: {
 			fontSize: "11",
 			fontWeight: "500",
@@ -18,7 +17,6 @@ const tag = {
 		height: "24",
 		paddingX: "8",
 		gap: "4",
-		icon: "16",
 		typography: {
 			fontSize: "12",
 			fontWeight: "700",
@@ -30,7 +28,6 @@ const tag = {
 		height: "28",
 		paddingX: "12",
 		gap: "6",
-		icon: "16",
 		typography: {
 			fontSize: "14",
 			fontWeight: "700",
@@ -136,7 +133,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
         fontWeight: tagTokens.tag.xs.typography.fontWeight,
         lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.xs.icon),
+        iconSize: 12,
         radius: `${tagTokens.tag.xs.radius}px`,
     },
     sm: {
@@ -146,7 +143,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
         fontWeight: tagTokens.tag.sm.typography.fontWeight,
         lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.sm.icon),
+        iconSize: 16,
         radius: `${tagTokens.tag.sm.radius}px`,
     },
     md: {
@@ -156,7 +153,7 @@ const SQUARE_SIZE_CONFIG = {
         fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
         fontWeight: tagTokens.tag.md.typography.fontWeight,
         lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
-        iconSize: Number(tagTokens.tag.md.icon),
+        iconSize: 16,
         radius: `${tagTokens.tag.md.radius}px`,
     },
 };
@@ -190,6 +187,9 @@ const SdTag = class {
     label = '';
     icon;
     isLeft = true;
+    componentWillLoad() {
+        this.name = this.name ?? 'square_sm_grey';
+    }
     get resolvedName() {
         if (!isTagName(this.name)) {
             throw new Error(`Invalid sd-tag name: "${this.name}"`);
@@ -200,14 +200,14 @@ const SdTag = class {
         return TAG_CONFIG[this.resolvedName];
     }
     renderIcon(color, size) {
-        if (!this.icon)
+        if (this.icon == null)
             return null;
         return index.h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
     }
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (index.h("span", { key: 'a52a06f79f448427ff3fe2a40c43d23a64e8ed62', class: "sd-tag", style: {
+        return (index.h("span", { key: '57f3c3f9ad53059fabff205cb44ffa3d1da9a711', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -217,7 +217,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '8e737f385a32109ab58fe4da036dbf594079f217', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '3360f36d18f073cd24699b6b8db2e731fda351ac', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.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}`;
@@ -19,6 +19,10 @@ const SdTd = class {
     // <sd-td> 호스트는 display:contents라 호스트의 class는 시각 효과가 없기 때문에,
     // 이 prop을 통해 sd-table 레지스트리에 등록 → sd-tr가 td 렌더 시 합쳐 사용한다.
     sdClass;
+    dividerLeft = false;
+    dividerRight = false;
+    // true이면 이 셀이 속한 행 전체가 dense를 무시하고 default 레이아웃으로 동작한다.
+    useFrame = false;
     handleFieldChange(_newField, oldField) {
         this.syncSlotName();
         this.syncSpanRegistration();
@@ -35,10 +39,18 @@ const SdTd = class {
     handleSdClassChange() {
         this.syncCellClassRegistration();
     }
+    handleDividerChange() {
+        this.syncCellClassRegistration();
+    }
+    handleUseFieldChange() {
+        this.syncUseFieldRegistration();
+        this.requestParentTrUpdate();
+    }
     componentWillLoad() {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
         // slot 타이밍 엇갈림 대응: 부모 sd-tr forceUpdate로 슬롯 재매칭
         const parentTr = this.el.parentElement;
         if (parentTr?.tagName?.toLowerCase() === 'sd-tr') {
@@ -49,6 +61,7 @@ const SdTd = class {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
     }
     // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
     // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
@@ -56,12 +69,14 @@ const SdTd = class {
     connectedCallback() {
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
     }
     disconnectedCallback() {
         const table = this.findTable();
-        if (table && this.field && this.rowKey != null) {
+        if (table != null && this.field !== '' && this.rowKey != null) {
             table.unregisterSpanSync?.(String(this.rowKey), this.field);
             table.unregisterCellClassSync?.(String(this.rowKey), this.field);
+            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
             this.requestParentTrUpdate();
         }
     }
@@ -82,7 +97,7 @@ const SdTd = class {
     }
     syncSpanRegistration() {
         const table = this.findTable();
-        if (!table?.registerSpanSync || !this.field || this.rowKey == null)
+        if (table?.registerSpanSync == null || this.field === '' || this.rowKey == null)
             return;
         const rs = Math.max(1, Math.floor(Number(this.rowspan) || 1));
         const cs = Math.max(1, Math.floor(Number(this.colspan) || 1));
@@ -96,27 +111,45 @@ const SdTd = class {
             return;
         const oldField = prevField ?? this.field;
         const oldRowKey = prevRowKey ?? (this.rowKey != null ? String(this.rowKey) : undefined);
-        if (oldField && oldRowKey != null) {
+        if (oldField !== '' && oldRowKey != null) {
             table.unregisterCellClassSync?.(oldRowKey, oldField);
         }
-        if (!table.registerCellClassSync || !this.field || this.rowKey == null)
+        if (!table.registerCellClassSync || this.field === '' || this.rowKey == null)
             return;
-        table.registerCellClassSync(String(this.rowKey), this.field, this.sdClass);
+        const combinedClass = [
+            this.sdClass,
+            this.dividerLeft && 'td--divider-left',
+            this.dividerRight && 'td--divider-right',
+        ]
+            .filter(Boolean)
+            .join(' ') || undefined;
+        table.registerCellClassSync(String(this.rowKey), this.field, combinedClass);
         this.requestParentTrUpdate();
     }
+    syncUseFieldRegistration() {
+        const table = this.findTable();
+        if (!table || this.field === '' || this.rowKey == null)
+            return;
+        if (this.useFrame) {
+            table.registerUseFrameSync?.(String(this.rowKey), this.field);
+        }
+        else {
+            table.unregisterUseFrameSync?.(String(this.rowKey), this.field);
+        }
+    }
     syncSlotName() {
         const table = this.el.closest('sd-table');
         const fromMethod = table?.getTableIdSync?.();
         const fromAttr = table?.getAttribute(constants.TABLE_ID_ATTR);
-        const tableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+        const tableId = (fromMethod != null && fromMethod !== '' && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr != null && fromAttr !== '' && fromAttr !== 'undefined' ? fromAttr : null) ??
             '';
-        if (this.field && this.rowKey !== undefined && tableId) {
+        if (this.field !== '' && this.rowKey !== undefined && tableId !== '') {
             this.el.setAttribute('slot', `${tableId}-${this.field}-${this.rowKey}`);
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'a8b4cb79a6b40119087fcba358a5c8daadb70fe8', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '959b53537662f22e6bb5fe8d775530c11cbdff3b' })));
+        return (index.h(index.Host, { key: '7d51ea5f02ba2df099f4440be26c2f0be8a73a6b', class: { [`align-${this.align}`]: Boolean(this.align) } }, index.h("slot", { key: '9a6a634e2bcd206ec9099c6be738c3853d0cbebf' })));
     }
     static get watchers() { return {
         "field": [{
@@ -133,6 +166,15 @@ const SdTd = class {
             }],
         "sdClass": [{
                 "handleSdClassChange": 0
+            }],
+        "dividerLeft": [{
+                "handleDividerChange": 0
+            }],
+        "dividerRight": [{
+                "handleDividerChange": 0
+            }],
+        "useFrame": [{
+                "handleUseFieldChange": 0
             }]
     }; }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const textLink = {
 	gap: "4",
@@ -76,16 +76,21 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (index.h("span", { key: '8b02293383e914a0d2c9ac4c9fa2bf4d6bd56d97', class: {
+        return (index.h("span", { key: '11d2153cc91818c1214e21ffa14bd08249ad1116', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '1f10b5c49d53009a68550e22167b0ce58c29d555', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'a5b528b595d036c079818fab432171e39a4c1a4e', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'fd1559e836bc3a6089043e5f4d9de12d364ab61f', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleClick();
+                }
+            } }, this.icon && (index.h("sd-icon", { key: '23972d53b4968c9bdef9b54dfa785e658ba117ef', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '5e99a6c1151093929086ec4398b93d7db590d959', class: labelClassName }, this.label), this.useArrow && (index.h("span", { key: 'b814759278cefe229a5321556374438f281ce0f3', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '3af56ca5845d6d544c786142ae5842aca0720808', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: 'dfe3286eaeef9a176f5ff1a69950713e2712a550', name: "chevronRight", size: TEXT_LINK_LAYOUT.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-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: 'b734ca5768953e095f98a7f8312f6fdd7a24ae30', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const toast = {
 	icon: "16",
@@ -84,12 +84,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: '26f82a1da683136f605ddcc5c6c6a45266ae3158', style: {
+        return (index.h("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: 'd2ed3c831b86e2ddee804f8ce770642ea698f7ce', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'a6dba347a064420c2747963da35ad0d50406f426', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'a05871f3711ae89050f11bdeb92d27b6c06354ba', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '11901cf0531ac2b658d2278ba27021f9714340d7', class: "sd-toast__content" }, index.h("span", { key: '5edf234270283818732a5dbfaf581a27c8c084e6', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '518207a380b2d30c160a2a76649222655ec821cf', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'ed4847317cc9e0765a5964ab7ed245a37dce45ee', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '74a8f5d6c2392bdb7c59d754d72ed591fa68bf62', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, index.h("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, index.h("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '55a6bf6457bd89254f6eb01072d46a0edbb8b510', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.js');
 
 const toggle = {
 	height: "28",
@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: '958d824b5c502a578e1bb7a8fb0d30d59c2d8eda', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '81d5dc8ff0f9ca7e8a219f3c0e7bcce3a4ffc875', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-N6nQ1QT-.js → tooltipArrow-BjSFKIUq.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BlxrCRYi.js');
+var index = require('./index-Cw-78mnC.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/cjs/useDatePicker-dCuEgvjX.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var component_datepicker = require('./component.datepicker-Cw_-oidk.js');
+
+const CALENDAR_LAYOUT = {
+    bg: component_datepicker.datepickerTokens.datepicker.calendar.bg,
+    paddingXY: component_datepicker.datepickerTokens.datepicker.calendar.paddingXY,
+    gap: component_datepicker.datepickerTokens.datepicker.calendar.gap,
+    radius: component_datepicker.datepickerTokens.datepicker.calendar.radius,
+    header: {
+        gap: component_datepicker.datepickerTokens.datepicker.calendar.header.gap,
+        divider: component_datepicker.datepickerTokens.datepicker.calendar.header.divider,
+        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.fontSize,
+        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.lineHeight,
+        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.header.typography.fontWeight,
+    },
+    week: {
+        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.fontSize,
+        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.lineHeight,
+        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.week.typography.fontWeight,
+        color: component_datepicker.datepickerTokens.datepicker.calendar.week.color,
+    },
+    grid: {
+        rowGap: component_datepicker.datepickerTokens.datepicker.calendar.grid.rowGap,
+    },
+    day: {
+        size: component_datepicker.datepickerTokens.datepicker.calendar.day.width,
+        circleSize: component_datepicker.datepickerTokens.datepicker.calendar.day.circle.size,
+        circleRadius: component_datepicker.datepickerTokens.datepicker.calendar.day.circle.radius,
+        defaultText: component_datepicker.datepickerTokens.datepicker.calendar.day.default.text,
+        hoverText: component_datepicker.datepickerTokens.datepicker.calendar.day.hover.text,
+        hoverBorder: component_datepicker.datepickerTokens.datepicker.calendar.day.hover.border,
+        selectBg: component_datepicker.datepickerTokens.datepicker.calendar.day.select.bg,
+        selectText: component_datepicker.datepickerTokens.datepicker.calendar.day.select.text,
+        disabledText: component_datepicker.datepickerTokens.datepicker.calendar.day.disabled.text,
+        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
+        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
+        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
+        boldFontWeight: component_datepicker.datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
+        dot: {
+            size: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.size,
+            gap: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.gap,
+            paddingY: component_datepicker.datepickerTokens.datepicker.calendar.day.dot.paddingY,
+        },
+    },
+    legend: {
+        fontSize: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.fontSize,
+        lineHeight: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
+        fontWeight: component_datepicker.datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
+        gap: component_datepicker.datepickerTokens.datepicker.calendar.legend.gap,
+        groupGap: component_datepicker.datepickerTokens.datepicker.calendar.legend.group.gap,
+    },
+};
+const WEEK_LABELS = ['일', '월', '화', '수', '목', '금', '토'];
+
+const daysInMonth = (date) => {
+    const year = Number(date.split('-')[0]);
+    const month = Number(date.split('-')[1]);
+    const daysInMonth = new Date(year, month, 0).getDate(); // month에 0을 전달하면 전달의 마지막 날짜를 반환
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+};
+
+const getToday = () => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+const today = getToday();
+
+const useDatePicker = () => {
+    const formatDate = (year, month, day) => {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    };
+    const createCalendar = (year, month) => {
+        const days = daysInMonth(`${year}-${String(month).padStart(2, '0')}-01`);
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const prevMonthDays = Array.from({ length: firstDayIndex });
+        const remainingDays = (7 - ((days.length + firstDayIndex) % 7)) % 7;
+        const afterMonthDays = Array.from({ length: remainingDays });
+        return { days, prevMonthDays, afterMonthDays };
+    };
+    const calculateYearMonth = (year, month, type) => {
+        let newYear = year;
+        let newMonth = type === 'prev' ? month - 1 : month + 1;
+        if (newMonth < 1) {
+            newYear = year - 1;
+            newMonth = 12;
+        }
+        else if (newMonth > 12) {
+            newYear = year + 1;
+            newMonth = 1;
+        }
+        return { newYear, newMonth };
+    };
+    return { formatDate, createCalendar, calculateYearMonth };
+};
+
+exports.CALENDAR_LAYOUT = CALENDAR_LAYOUT;
+exports.WEEK_LABELS = WEEK_LABELS;
+exports.today = today;
+exports.useDatePicker = useDatePicker;

package/dist/collection/collection-manifest.json

@@ -1,6 +1,5 @@
 {
   "entries": [
-    "components/sd-calendar/sd-calendar.js",
     "components/sd-checkbox/sd-checkbox.js",
     "components/sd-date-box/sd-date-box.js",
     "components/sd-date-range-picker/sd-date-range-picker.js",
@@ -16,6 +15,7 @@
     "components/sd-ghost-button/sd-ghost-button.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
+    "components/sd-calendar/sd-calendar.js",
     "components/sd-card/sd-card.js",
     "components/sd-chip/sd-chip.js",
     "components/sd-circle-progress/sd-circle-progress.js",
@@ -24,7 +24,6 @@
     "components/sd-tag/sd-tag.js",
     "components/sd-date-picker/sd-date-picker-trigger/sd-date-picker-trigger.js",
     "components/sd-date-picker/sd-date-picker.js",
-    "components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js",
     "components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js",
     "components/sd-portal/sd-portal.js",
     "components/sd-field/sd-field.js",

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '278f81cf1f4ae0ca65ac6187b7fb31e4f12002f6', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '7d110c9a1633f0db63c3d605f4422b90b9eb1a5c', class: "sd-action-modal__header" }, h("h2", { key: 'd81100f64dec3a483d8f40b0be5069182de892c1', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'c90c38a33877c85837316d63aadfab5f4bee73dc', class: "sd-action-modal__header-sub" }, h("slot", { key: '98ea6a6f21d1596fa22fb7a9b37bb1169dcc6b16', name: "header-sub-title" })), h("sd-ghost-button", { key: 'dd3429279996c79dec50aef0d77cfa21f4b0392b', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'c8621876c083c1026ddbecef875b4308ce85835e', class: "sd-action-modal__body" }, h("slot", { key: 'bcf70a5bf4af9afdb421894a4cb2abeea0e277e9', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'bc783b531cc045c360680326f826cda3ccc1bd67', class: "sd-action-modal__footer" }, h("div", { key: '20d6c7708bc3218b038c5cb4faddcc6fc58acee7', class: "sd-action-modal__footer-sub" }, h("slot", { key: '08703135da34bac499de135ed5b8e85eeb0fbc3a', name: "bottom-sub-content" })), h("sd-button", { key: 'f384e5914a78fdfcfdd0bd3ad89f7bcf20c5f8d2', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '7b59ff655bb9f7a6bc79bb948201a6a532c16b06', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '3e141509dc7082e08f448043573de3a8bd8e7cf0', class: "sd-action-modal__header" }, h("h2", { key: 'ba80634b72ce1168d2ab3aec12bdf2a6546ff08d', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'aed32008f0dcaa2deec098ca3c0c9cb1e8f6fb50', class: "sd-action-modal__header-sub" }, h("slot", { key: '32a015a006cbcf26373c64a72e4131b878c53222', name: "header-sub-title" })), h("sd-ghost-button", { key: '574d14cf2d0031dbf43cbb5999d4471a235ca72a', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '713761da4ad2217c1d762fd56bc391ddc5c9cded', class: "sd-action-modal__body" }, h("slot", { key: 'e224251b153d60cf35056b542c5d9925f4918b7f', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '43d6e4ffed21704ac68689f0742f8d7a6456b0b6', class: "sd-action-modal__footer" }, h("div", { key: 'bd9cce1c5b1fb02156008a4e76c65dc8cb4385aa', class: "sd-action-modal__footer-sub" }, h("slot", { key: '4de818c9ba8fcdb159963b9c9c7ce893fa3216da', name: "bottom-sub-content" })), h("sd-button", { key: 'af9f4c1fd4c6bb482690c2545e0add53c308b95a', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -4,7 +4,7 @@ export class SdBadge {
     color = 'blue';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: 'aba37986d6beea38fb1c5476f5187359ac2ebf0c', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'dd80e8d18c79eda021baf7a7f233222c9c2aa717', class: "sd-badge__dot" })));
+        return (h("div", { key: '9ae835aba8a4acde4b918eceda00441ee2c22905', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'c3b648845b5c138026a82a6a2c483d2a56ed2aab', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-barcode-input/sd-barcode-input.js

@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '206beaac9acf7bf3e787b98c1e9bda602f1aa1d2', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: 'ab14cdc3e65faa72ce7c549234e40ca54f441c7d', class: "sd-barcode-input__content" }, h("slot", { key: '7568acdee85fa0ae7440d7db65fd414fb1c27d1c', name: "prefix" }), h("input", { key: '388b007eb7d830083e75e6b3016c412a6922bb1a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '8e8d4feee62108904eb766b1917ed1e20cacc83b', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'a9b158ebcdcb31009b13db624fb8c74d6252e20d', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '61eb9beceb57e58323c1477c71147607db834e71', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("label", { key: '9d4fa219af76d29b2d2e8443af1e66b980d62dd1', class: "sd-barcode-input__content" }, h("slot", { key: '044bf2c4a6e79bb0d6b2a76398107b47d1237662', name: "prefix" }), h("input", { key: '2522d0ded40b69c76872877bede00b1e4e5260d2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '8dc300df9f8bd7045f9c9e357925be3b7f2bdbb4', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '1b3cab2c7fe9caf973e7defff170f64b3fd35daa', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -20,10 +20,11 @@ export class SdButton {
         this.click.emit(event);
     };
     get resolvedName() {
-        if (!isButtonName(this.name)) {
-            throw new Error(`Invalid sd-button name: "${this.name}"`);
+        const name = this.name || 'primary_sm';
+        if (!isButtonName(name)) {
+            throw new Error(`Invalid sd-button name: "${name}"`);
         }
-        return this.name;
+        return name;
     }
     get resolvedConfig() {
         const name = this.resolvedName;
@@ -49,8 +50,8 @@ export class SdButton {
         this.warnIfMissingAriaLabel();
     }
     warnIfMissingAriaLabel() {
-        const iconOnly = !this.label && (isValidIcon(this.icon) || isValidIcon(this.rightIcon));
-        const missingAriaLabel = iconOnly && !this.ariaLabel.trim();
+        const iconOnly = this.label === '' && (isValidIcon(this.icon) || isValidIcon(this.rightIcon));
+        const missingAriaLabel = iconOnly && this.ariaLabel.trim() === '';
         if (!missingAriaLabel) {
             this.hasWarnedMissingAriaLabel = false;
             return;
@@ -67,14 +68,14 @@ export class SdButton {
         const validIcon = isValidIcon(this.icon) ? this.icon : undefined;
         const validRightIcon = isValidIcon(this.rightIcon) ? this.rightIcon : undefined;
         const iconOnly = !hasLabel && Boolean(validIcon) !== Boolean(validRightIcon);
-        const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: '3f228e1e1bd80106c60aacab606c48622864045d', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
+        const accessibleName = iconOnly && this.ariaLabel.trim() !== '' ? this.ariaLabel : undefined;
+        return (h("button", { key: '3caa9dff467ec7efa748eecd736296500a222ecb', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type ?? 'button', disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-bg': config.color,
                 '--sd-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '03803b4bf493ee2a03197437d40daba083f337fe', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: '7e6b2c31136c90a0da3f174be15c04f3da405ed6', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: '32f11f40391d214d80090653ab3c4387f7359bbb', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: 'a577a5074d02f04898308a593a13803abfca2510', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: 'cded66e4802956c29064cbdcc12b9dd1066a45c3', class: "sd-button__content" }, validIcon && (h("sd-icon", { key: 'b989e3eb8661e16f052d5c7a292ea316a2b821df', class: "sd-button__icon", name: validIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })), this.label && h("span", { key: '07695896bd8f11ca8753dcb171b5c7f0e7304c0d', class: "sd-button__label" }, this.label), validRightIcon && (h("sd-icon", { key: 'bfd18c0a390a955d8de99789c86ce39fb605beae', class: "sd-button__icon sd-button__icon--right", name: validRightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-current-icon)" })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {