@sellmate/design-system 1.1.0 → 1.3.0

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-CLCoul8o.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-0U6dRjlq.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}`;
@@ -17,6 +17,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();
@@ -33,10 +37,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') {
@@ -47,6 +59,7 @@ const SdTd = class {
         this.syncSlotName();
         this.syncSpanRegistration();
         this.syncCellClassRegistration();
+        this.syncUseFieldRegistration();
     }
     // React StrictMode에서는 disconnect/reconnect 사이클이 일어나면서
     // 동일 인스턴스의 componentWillLoad는 더 이상 호출되지 않는다.
@@ -54,12 +67,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();
         }
     }
@@ -80,7 +95,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));
@@ -94,27 +109,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(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 (h(Host, { key: 'a8b4cb79a6b40119087fcba358a5c8daadb70fe8', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '959b53537662f22e6bb5fe8d775530c11cbdff3b' })));
+        return (h(Host, { key: '7d51ea5f02ba2df099f4440be26c2f0be8a73a6b', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '9a6a634e2bcd206ec9099c6be738c3853d0cbebf' })));
     }
     static get watchers() { return {
         "field": [{
@@ -131,6 +164,15 @@ const SdTd = class {
             }],
         "sdClass": [{
                 "handleSdClassChange": 0
+            }],
+        "dividerLeft": [{
+                "handleDividerChange": 0
+            }],
+        "dividerRight": [{
+                "handleDividerChange": 0
+            }],
+        "useFrame": [{
+                "handleUseFieldChange": 0
             }]
     }; }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const textLink = {
 	gap: "4",
@@ -74,16 +74,21 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '8b02293383e914a0d2c9ac4c9fa2bf4d6bd56d97', class: {
+        return (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 && (h("sd-icon", { key: '1f10b5c49d53009a68550e22167b0ce58c29d555', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'a5b528b595d036c079818fab432171e39a4c1a4e', class: labelClassName }, this.label), this.useArrow && (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 && (h("sd-icon", { key: '23972d53b4968c9bdef9b54dfa785e658ba117ef', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '5e99a6c1151093929086ec4398b93d7db590d959', class: labelClassName }, this.label), this.useArrow && (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',
-            } }, h("sd-icon", { key: '3af56ca5845d6d544c786142ae5842aca0720808', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'dfe3286eaeef9a176f5ff1a69950713e2712a550', name: "chevronRight", size: TEXT_LINK_LAYOUT.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-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -232,7 +232,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 (h("div", { key: 'b734ca5768953e095f98a7f8312f6fdd7a24ae30', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: 'bc3c9591b6453eed7df462841e29784c29b3aeef', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const toast = {
 	icon: "16",
@@ -82,12 +82,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 (h("div", { key: '26f82a1da683136f605ddcc5c6c6a45266ae3158', style: {
+        return (h("div", { key: 'db3ffaf51dc96c39c05558017f25929c679a59df', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: 'd2ed3c831b86e2ddee804f8ce770642ea698f7ce', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'a6dba347a064420c2747963da35ad0d50406f426', class: "sd-toast__icon" }, h("sd-icon", { key: 'a05871f3711ae89050f11bdeb92d27b6c06354ba', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '11901cf0531ac2b658d2278ba27021f9714340d7', class: "sd-toast__content" }, h("span", { key: '5edf234270283818732a5dbfaf581a27c8c084e6', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '518207a380b2d30c160a2a76649222655ec821cf', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'ed4847317cc9e0765a5964ab7ed245a37dce45ee', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '74a8f5d6c2392bdb7c59d754d72ed591fa68bf62', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '92344f5bb95b0d4787591207f2e017d7dd177091', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '991db58b2cb019dd3a787e000e9d8813014bbb09', class: "sd-toast__icon" }, h("sd-icon", { key: '24d53cd77fdea82ec07663a8968493ec2b794751', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: '70cfad4ef389cca798be9baeac99bfc41efcc615', class: "sd-toast__content" }, h("span", { key: '5927023435b17dc25ee07630fc4ae4568aadd9b9', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '410c024fd81ebcc78175c1855a86f590566d1a81', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: 'd85287e7ef796a11f850a0ce5cde87f5881fa5c9', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (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/esm/sd-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CLCoul8o.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const toggle = {
 	height: "28",
@@ -118,7 +118,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: '958d824b5c502a578e1bb7a8fb0d30d59c2d8eda', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '81d5dc8ff0f9ca7e8a219f3c0e7bcce3a4ffc875', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'b16577aa25863a9dc337314d9059328799c1cd1e', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '6130825b74df8a573f4e062671fd694508759e82', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{tooltipArrow-Bc-yw2nt.js → tooltipArrow-O5LOsHae.js}

@@ -1,4 +1,4 @@
-import { h } from './index-CLCoul8o.js';
+import { h } from './index-0U6dRjlq.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/esm/useDatePicker-D5RmWGOp.js

@@ -0,0 +1,98 @@
+import { d as datepickerTokens } from './component.datepicker-BQn6le_Y.js';
+
+const CALENDAR_LAYOUT = {
+    bg: datepickerTokens.datepicker.calendar.bg,
+    paddingXY: datepickerTokens.datepicker.calendar.paddingXY,
+    gap: datepickerTokens.datepicker.calendar.gap,
+    radius: datepickerTokens.datepicker.calendar.radius,
+    header: {
+        gap: datepickerTokens.datepicker.calendar.header.gap,
+        divider: datepickerTokens.datepicker.calendar.header.divider,
+        fontSize: datepickerTokens.datepicker.calendar.header.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.header.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.header.typography.fontWeight,
+    },
+    week: {
+        fontSize: datepickerTokens.datepicker.calendar.week.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.week.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.week.typography.fontWeight,
+        color: datepickerTokens.datepicker.calendar.week.color,
+    },
+    grid: {
+        rowGap: datepickerTokens.datepicker.calendar.grid.rowGap,
+    },
+    day: {
+        size: datepickerTokens.datepicker.calendar.day.width,
+        circleSize: datepickerTokens.datepicker.calendar.day.circle.size,
+        circleRadius: datepickerTokens.datepicker.calendar.day.circle.radius,
+        defaultText: datepickerTokens.datepicker.calendar.day.default.text,
+        hoverText: datepickerTokens.datepicker.calendar.day.hover.text,
+        hoverBorder: datepickerTokens.datepicker.calendar.day.hover.border,
+        selectBg: datepickerTokens.datepicker.calendar.day.select.bg,
+        selectText: datepickerTokens.datepicker.calendar.day.select.text,
+        disabledText: datepickerTokens.datepicker.calendar.day.disabled.text,
+        fontSize: datepickerTokens.datepicker.calendar.day.typography.default.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.day.typography.default.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.day.typography.default.fontWeight,
+        boldFontWeight: datepickerTokens.datepicker.calendar.day.typography.bold.fontWeight,
+        dot: {
+            size: datepickerTokens.datepicker.calendar.day.dot.size,
+            gap: datepickerTokens.datepicker.calendar.day.dot.gap,
+            paddingY: datepickerTokens.datepicker.calendar.day.dot.paddingY,
+        },
+    },
+    legend: {
+        fontSize: datepickerTokens.datepicker.calendar.legend.typography.fontSize,
+        lineHeight: datepickerTokens.datepicker.calendar.legend.typography.lineHeight,
+        fontWeight: datepickerTokens.datepicker.calendar.legend.typography.fontWeight,
+        gap: datepickerTokens.datepicker.calendar.legend.gap,
+        groupGap: 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 };
+};
+
+export { CALENDAR_LAYOUT as C, WEEK_LABELS as W, today as t, useDatePicker as u };

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

@@ -0,0 +1,55 @@
+export declare const CALENDAR_LAYOUT: {
+    bg: string;
+    paddingXY: string;
+    gap: string;
+    radius: string;
+    header: {
+        gap: string;
+        divider: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+    };
+    week: {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        color: string;
+    };
+    grid: {
+        rowGap: string;
+    };
+    day: {
+        size: string;
+        circleSize: string;
+        circleRadius: string;
+        defaultText: string;
+        hoverText: string;
+        hoverBorder: string;
+        selectBg: string;
+        selectText: string;
+        disabledText: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        boldFontWeight: string;
+        dot: {
+            size: string;
+            gap: string;
+            paddingY: string;
+        };
+    };
+    legend: {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        gap: string;
+        groupGap: string;
+    };
+};
+export declare const WEEK_LABELS: readonly ["일", "월", "화", "수", "목", "금", "토"];
+export interface CalendarEventGroup {
+    color: string;
+    label: string;
+    dates: string[];
+}

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

@@ -1,34 +1,31 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export interface CalendarEvents {
-    [date: string]: string[];
-}
-export interface CalendarEventColors {
-    [eventName: string]: string;
-}
+import { type CalendarEventGroup } from './sd-calendar.config';
 export declare class SdCalendar {
     value: string | null;
     selectable?: [string, string];
-    events?: CalendarEvents;
-    eventColors?: CalendarEventColors;
-    currentYear: number;
-    currentMonth: number;
-    eventsRevision: number;
-    select: EventEmitter<string>;
+    events?: CalendarEventGroup[];
+    private currentYear;
+    private currentMonth;
+    update: EventEmitter<string>;
     viewChange: EventEmitter<{
         year: number;
         month: number;
     }>;
     private dateUtil;
+    private _eventMapCache?;
+    private get eventMap();
+    private get legendItems();
     componentWillLoad(): void;
     handleValueChange(): void;
-    handleEventsChange(): void;
-    private initCalendar;
-    private get calendar();
-    private handleUpdateMonth;
-    private handleDateClick;
-    private isDisabledDate;
-    private getEventColor;
-    private getAllEventNames;
-    private getEventsForDate;
+    private syncViewFromValue;
+    private formatDate;
+    private get cells();
+    private emitViewChange;
+    private goPrevYear;
+    private goNextYear;
+    private goPrevMonth;
+    private goNextMonth;
+    private isDisabled;
+    private handleDayClick;
     render(): any;
 }

package/dist/types/components/sd-date-picker/sd-date-picker.config.d.ts

@@ -31,41 +31,3 @@ export declare const DATEPICKER_COLORS: {
         disabled: string;
     };
 };
-export declare const CALENDAR_LAYOUT: {
-    bg: string;
-    paddingXY: string;
-    gap: string;
-    radius: string;
-    header: {
-        gap: string;
-        divider: string;
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-    };
-    week: {
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-        color: string;
-    };
-    grid: {
-        rowGap: string;
-    };
-    day: {
-        size: string;
-        circleSize: string;
-        circleRadius: string;
-        defaultText: string;
-        hoverText: string;
-        hoverBorder: string;
-        selectBg: string;
-        selectText: string;
-        disabledText: string;
-        fontSize: string;
-        lineHeight: string;
-        fontWeight: string;
-        boldFontWeight: string;
-    };
-};
-export declare const WEEK_LABELS: readonly ["일", "월", "화", "수", "목", "금", "토"];

package/dist/types/components/sd-date-range-picker/sd-date-range-picker.config.d.ts

@@ -1,4 +1,5 @@
-import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, CALENDAR_LAYOUT, WEEK_LABELS, type DatePickerSize, type DatePickerSizeTokens } from '../sd-date-picker/sd-date-picker.config';
+import { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, type DatePickerSize, type DatePickerSizeTokens } from '../sd-date-picker/sd-date-picker.config';
+import { CALENDAR_LAYOUT, WEEK_LABELS } from '../sd-calendar/sd-calendar.config';
 export { DATEPICKER_SIZE_MAP, DATEPICKER_COLORS, CALENDAR_LAYOUT, WEEK_LABELS };
 export type { DatePickerSize, DatePickerSizeTokens };
 export declare const RANGE_LAYOUT: {

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts

@@ -10,11 +10,12 @@ export type DropdownButtonSize = 'xs' | 'sm' | 'md';
 type UnsupportedDropdownButtonName = `${string}_lg`;
 export type DropdownButtonName = Exclude<ButtonName, UnsupportedDropdownButtonName>;
 export type DropdownButtonPreset = ButtonPreset;
-export declare const DROPDOWN_BUTTON_CONFIG: Record<DropdownButtonName, {
-    variant: "primary" | "outline";
+type DropdownButtonConfigMap = Record<DropdownButtonName, {
+    variant: 'primary' | 'outline';
     size: DropdownButtonSize;
     color: string;
 }>;
+export declare const DROPDOWN_BUTTON_CONFIG: DropdownButtonConfigMap;
 export declare const PRESET_HOVER_BACKGROUNDS: {
     readonly primary: string;
     readonly secondary: string;

package/dist/types/components/sd-table/constants.d.ts

@@ -6,6 +6,7 @@ export interface SdTableColumn {
     field: string | ((row: any) => any);
     align?: 'left' | 'center' | 'right';
     width?: string;
+    autoWidth?: boolean;
     format?: (value: any, row: any) => string;
     visible?: boolean;
     icon?: IconName;
@@ -44,4 +45,5 @@ export interface SdTableConfig {
     scrolledLeft: boolean;
     scrolledRight: boolean;
     columnWidths: number[];
+    dense: boolean;
 }

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

@@ -41,6 +41,10 @@ export declare const TABLE_BORDER: {
     color: string;
     width: string;
 };
+export declare const TABLE_SEPARATOR: {
+    color: string;
+    width: string;
+};
 export declare const TABLE_RADIUS: string;
 export declare const TABLE_CONTENT: {
     gap: string;

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

@@ -22,8 +22,10 @@ export declare class SdTable {
     pagination?: SdTablePagination;
     useInternalPagination: boolean;
     useRowsPerPageSelect: boolean;
+    dense: boolean;
     useVirtualScroll: boolean;
-    rowHeight: number;
+    rowHeight?: number;
+    private get effectiveRowHeight();
     virtualBuffer: number;
     virtualEndThreshold: number;
     rowsPerPageOption: SelectOption[];
@@ -48,15 +50,20 @@ export declare class SdTable {
     scrolledRight: boolean;
     rowCount: number;
     loadingScrollTop: number;
+    noDataBodyHeight: number;
     autoThead: boolean;
     autoTbody: boolean;
     private vsStart;
     private vsEnd;
     private lastReachEndNotifiedRowCount;
     private scrollContainer;
+    private noDataContentEl;
+    private noDataContentResizeObserver?;
     private onScroll?;
     private spanRegistry;
+    private useFrameRegistry;
     private cellClassRegistry;
+    private separatorPrevIndices;
     private rowIndexMap;
     private rebuildRowIndexMap;
     private resolveRowIndex;
@@ -79,6 +86,8 @@ export declare class SdTable {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private syncNoDataContentObserver;
+    private observeNoDataContentHeight;
     private queryChildEl;
     private queryAllTr;
     private pushRowsToChildren;
@@ -96,6 +105,9 @@ export declare class SdTable {
         rowCount: number;
     };
     getConfigSync(): SdTableConfig;
+    registerUseFrameSync(rowKey: string, field: string): void;
+    unregisterUseFrameSync(rowKey: string, field: string): void;
+    hasUseFrameInRowSync(rowKey: string): boolean;
     isRowSelectedSync(row: Row): boolean;
     isRowSelected(row: Row): Promise<boolean>;
     updateRowSelectSync(row: Row): void;
@@ -109,20 +121,8 @@ export declare class SdTable {
     private changeRowsPerPage;
     private get lastPageNumber();
     handleResize(index: number, event: MouseEvent, reversed?: boolean): void;
-    getStickyStyleSync(colIdx: number): {
-        '--sticky-left-offset': string;
-        '--sticky-right-offset': string;
-        width: string;
-        minWidth: string;
-        maxWidth: string;
-    };
-    getStickyStyle(colIdx: number): Promise<{
-        '--sticky-left-offset': string;
-        '--sticky-right-offset': string;
-        width: string;
-        minWidth: string;
-        maxWidth: string;
-    }>;
+    getStickyStyleSync(colIdx: number): Record<string, string>;
+    getStickyStyle(colIdx: number): Promise<Record<string, string>>;
     private spanKey;
     private requestAllTrUpdate;
     registerSpanSync(rowKey: string, field: string, rowspan: number, colspan: number): void;
@@ -136,7 +136,11 @@ export declare class SdTable {
     getCellClassSync(rowKey: string, field: string): string | undefined;
     hasRowspanSync(): boolean;
     isCoveredSync(rowKey: string, colIdx: number, columns: SdTableColumn[]): boolean;
+    private resolveVisualBottom;
     isVisualLastRowSync(rowKey: string, field: string): boolean;
+    registerSeparatorSync(prevRowKey: string): void;
+    unregisterSeparatorSync(prevRowKey: string): void;
+    isVisualLastRowBeforeSeparatorSync(rowKey: string, field: string): boolean;
     setRowCountSync(count: number): void;
     setRowCount(count: number): Promise<void>;
     calculateVisibleRange(scrollTop: number, containerHeight: number): {

package/dist/types/components/sd-table/sd-td/sd-td.d.ts

@@ -6,10 +6,15 @@ export declare class SdTd {
     rowspan?: number;
     colspan?: number;
     sdClass?: string;
+    dividerLeft: boolean;
+    dividerRight: boolean;
+    useFrame: boolean;
     handleFieldChange(_newField: string, oldField: string): void;
     handleRowKeyChange(_newKey: string, oldKey: string): void;
     handleSpanChange(): void;
     handleSdClassChange(): void;
+    handleDividerChange(): void;
+    handleUseFieldChange(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     connectedCallback(): void;
@@ -18,6 +23,7 @@ export declare class SdTd {
     private requestParentTrUpdate;
     private syncSpanRegistration;
     private syncCellClassRegistration;
+    private syncUseFieldRegistration;
     private syncSlotName;
     render(): any;
 }