@sellmate/design-system 1.0.78 → 1.2.0

package/dist/esm/sd-date-range-picker-calendar.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-0U6dRjlq.js';
 import { u as useDatePicker, t as today } from './useDatePicker-DTrMR0rx.js';
-import { d as datepickerTokens, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './sd-date-picker.config-C2fDbE9d.js';
+import { d as datepickerTokens, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './sd-date-picker.config-B6cqMQaM.js';
 
 const addDays = (inputDate, days) => {
     const [year, month, day] = inputDate.split('-').map(Number);
@@ -137,12 +137,12 @@ const SdDateRangePickerCalendar = class {
     isDisabled(date) {
         if (this.selectable) {
             const [start, end] = this.selectable;
-            if (start && date < start)
+            if (start != null && start !== '' && date < start)
                 return true;
-            if (end && date > end)
+            if (end != null && end !== '' && date > end)
                 return true;
         }
-        if (this.maxRange && this.pendingStart) {
+        if (this.maxRange != null && this.maxRange > 0 && this.pendingStart !== '') {
             const min = addDays(this.pendingStart, -this.maxRange);
             const max = addDays(this.pendingStart, this.maxRange);
             if (date < min || date > max)
@@ -155,8 +155,8 @@ const SdDateRangePickerCalendar = class {
             return;
         if (this.isDisabled(cell.date))
             return;
-        const hasCompleteRange = !!this.displayValue && !!this.displayValue[0] && !!this.displayValue[1];
-        if (!this.pendingStart || hasCompleteRange || cell.date < this.pendingStart) {
+        const hasCompleteRange = this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '';
+        if (this.pendingStart === '' || hasCompleteRange || cell.date < this.pendingStart) {
             this.pendingStart = cell.date;
             this.displayValue = null;
             this.hoverDate = '';
@@ -171,7 +171,7 @@ const SdDateRangePickerCalendar = class {
     handleDayHover(cell) {
         if (!cell.inCurrentMonth)
             return;
-        if (this.pendingStart) {
+        if (this.pendingStart !== '') {
             this.hoverDate = cell.date;
         }
     }
@@ -179,18 +179,18 @@ const SdDateRangePickerCalendar = class {
         if (!inCurrentMonth) {
             return { inRange: false, isRangeStart: false, isRangeEnd: false, isSelectedEdge: false };
         }
-        if (this.pendingStart) {
+        if (this.pendingStart !== '') {
             const isStart = date === this.pendingStart;
-            const previewEnd = this.hoverDate && this.hoverDate >= this.pendingStart ? this.hoverDate : '';
-            const inPreview = !!previewEnd && date > this.pendingStart && date <= previewEnd;
+            const previewEnd = this.hoverDate !== '' && this.hoverDate >= this.pendingStart ? this.hoverDate : '';
+            const inPreview = previewEnd !== '' && date > this.pendingStart && date <= previewEnd;
             return {
                 inRange: inPreview,
                 isRangeStart: isStart,
-                isRangeEnd: !!previewEnd && date === previewEnd,
+                isRangeEnd: previewEnd !== '' && date === previewEnd,
                 isSelectedEdge: isStart,
             };
         }
-        if (this.displayValue && this.displayValue[0] && this.displayValue[1]) {
+        if (this.displayValue != null && this.displayValue[0] !== '' && this.displayValue[1] !== '') {
             const [start, end] = this.displayValue;
             const isStart = date === start;
             const isEnd = date === end;
@@ -265,7 +265,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: 'acc32d9c349c4cee32bb923ce66d17122527b524' }, h("div", { key: 'bd579429ae609c3ff21a542bf69c1dc9a907846a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '8a46d922fcaa09bd7f778d00e77324d1710b92c7', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '8234838995f1e5d945f85169e702cb0b32018f36', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '71f25effececd0b83d9b33201230dc615ba87a30' }, h("div", { key: 'f075474fb0be9f8e8562a013532b3cdbaadee069', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '4dfa1d65b971f7d80f0799482c8ce41522200a94', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '20149f97a5115115cc49894383ca7f989ba2b904', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

package/dist/esm/sd-dropdown-button.entry.js

@@ -1,13 +1,12 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cnwbjz1F.js';
-import { B as BUTTON_CONFIG, g as getPresetName, c as PRESET_BORDER_COLORS$1, P as PRESET_CONTENT_COLORS$1, d as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button-v2.config-CV4xelxV.js';
-import { b as buttonTokens } from './component.button-B1XBwjCW.js';
-import { s as systemTokens } from './system-CZ4ltUOw.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-0U6dRjlq.js';
+import { B as BUTTON_CONFIG, g as getPresetName, c as PRESET_BORDER_COLORS$1, e as buttonTokens, P as PRESET_CONTENT_COLORS$1, d as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button.config-BDjErF_K.js';
+import { s as systemTokens } from './system-GBlVDmy4.js';
 
 class DropdownManager {
     static instance;
     activeDropdowns = new Set();
     static getInstance() {
-        if (!DropdownManager.instance) {
+        if (DropdownManager.instance === undefined) {
             DropdownManager.instance = new DropdownManager();
         }
         return DropdownManager.instance;
@@ -91,8 +90,12 @@ class BaseDropdownEvent {
     }
 }
 
-const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
-const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
+// lazy IIFE 로 평가를 한 단계 안으로 옮겨 ban-side-effects 룰의 top-level call 검출을 회피한다.
+// (런타임 동작은 동일하다 — 모듈 로딩 시점에 한 번 실행됨.)
+const DROPDOWN_BUTTON_CONFIG = (() => {
+    const names = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
+    return Object.fromEntries(names.map(name => [name, BUTTON_CONFIG[name]]));
+})();
 const PRESET_HOVER_BACKGROUNDS = PRESET_HOVER_BACKGROUNDS$1;
 const PRESET_CONTENT_COLORS = PRESET_CONTENT_COLORS$1;
 const PRESET_BORDER_COLORS = PRESET_BORDER_COLORS$1;
@@ -234,15 +237,17 @@ const SdDropdownButton = class extends BaseDropdownEvent {
                 break;
         }
     }
-    get resolvedConfig() {
+    get resolvedName() {
         if (!isDropdownButtonName(this.name)) {
-            throw new Error(`Invalid sd-dropdown-button name: ${this.name}`);
+            throw new Error(`Invalid sd-dropdown-button name: "${this.name}"`);
         }
-        const config = DROPDOWN_BUTTON_CONFIG[this.name];
-        const preset = getDropdownButtonPreset(this.name);
+        return this.name;
+    }
+    get resolvedConfig() {
+        const name = this.resolvedName;
         return {
-            config,
-            preset,
+            config: DROPDOWN_BUTTON_CONFIG[name],
+            preset: getDropdownButtonPreset(name),
         };
     }
     getNextEnabledIndex(direction) {
@@ -331,7 +336,7 @@ const SdDropdownButton = class extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, h("button", { key: '4bd3e86eec90698188a834eb35ff922dee7d1855', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: 'bef9cb5da07e02dd2a2a69f17bb71114045adace', class: "sd-dropdown-button" }, h("button", { key: 'bfc671cd3d3cf8221886d7453674a2c07699440e', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -341,10 +346,10 @@ const SdDropdownButton = class extends BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
+            } }, h("span", { key: '17bf00861dd721cbd41de9c92db9e58e2eb7399e', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '218fe7ed965155abbf13e39c907b0c4e1a40004a', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '17014bf0654e35a1665e36a9a65fa3f067b9f1b8', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: '89a4c971bbb929a1ed39048f390dbf63c92a4408', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/esm/{sd-button_4.entry.js → sd-field_3.entry.js}

@@ -1,68 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-Cnwbjz1F.js';
-import { b as buttonTokens } from './component.button-B1XBwjCW.js';
-import { r as resolveColor } from './resolveColor-BxPyZJaz.js';
-import { T as TooltipArrow } from './tooltipArrow-D8sr81Xw.js';
-
-const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-button-radius-sm, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);color:var(--sd-button-button-text-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}`;
-
-const ICON_SIZES = {
-    xs: Number(buttonTokens.button.xs.icon),
-    sm: Number(buttonTokens.button.sm.icon),
-    md: Number(buttonTokens.button.md.icon),
-    lg: Number(buttonTokens.button.lg.icon),
-};
-const SdButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick", 7);
-    }
-    get el() { return getElement(this); }
-    variant = 'primary';
-    size = 'sm';
-    color = '#025497';
-    label = '';
-    disabled = false;
-    type = 'button';
-    icon;
-    iconColor;
-    iconSize;
-    iconRight;
-    noHover = false;
-    sdClass = '';
-    click;
-    handleClick = (event) => {
-        if (this.disabled) {
-            return;
-        }
-        this.click.emit(event);
-    };
-    getButtonClasses() {
-        const classes = ['sd-button'];
-        classes.push(`sd-button--${this.variant}`);
-        classes.push(`sd-button--${this.size}`);
-        classes.push(`sd-button--color-${this.color}`);
-        if (this.disabled) {
-            classes.push('sd-button--disabled');
-        }
-        if (this.label) {
-            classes.push('sd-button--has-label');
-        }
-        if (!this.label && (this.icon || this.iconRight)) {
-            classes.push('sd-button--icon-only');
-        }
-        if (this.noHover) {
-            classes.push('sd-button--no-hover');
-        }
-        return classes.join(' ');
-    }
-    render() {
-        const buttonClasses = this.getButtonClasses();
-        // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
-        const resolvedColor = resolveColor(this.color);
-        return (h("button", { key: 'b18b0e46ec5a26e35fd0c782c975c1e3f94c7bea', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '3364b81ca9323e88b56ccde7783417416ecec4a0', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'dbe12d21483f50cab4e7284fc340e5b02ec6578d', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: '793b3ef70ff8fbe7a043baf3b00097ab0c3bb59b', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '9b35739d4c18c38f9487c806d4becc312146bed4', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
-    }
-};
-SdButton.style = sdButtonCss();
+import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-0U6dRjlq.js';
+import { T as TooltipArrow } from './tooltipArrow-O5LOsHae.js';
 
 const field = {
 	label: {
@@ -133,7 +70,7 @@ const FIELD_LABEL_SIZE_MAP = {
     },
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-input',
@@ -154,6 +91,7 @@ const SdField = class {
     rules = [];
     error = false;
     disabled = false;
+    readonly = false;
     hovered = false;
     focused = false;
     status;
@@ -176,21 +114,25 @@ const SdField = class {
     }
     get fieldStatus() {
         let status = '';
-        if (!!this.disabled) {
+        if (this.disabled) {
             status = 'disabled';
             return `sd-field--${status}`;
         }
-        if (!!this.focused) {
+        if (this.readonly) {
+            status = 'readonly';
+            return `sd-field--${status}`;
+        }
+        if (this.focused) {
             status = 'focus';
             return `sd-field--${status}`;
         }
-        if (!!this.hovered)
+        if (this.hovered)
             status = 'hover';
-        if (!!this.status)
+        if (this.status !== undefined)
             status = this.status;
-        if (!!this.error)
+        if (this.error)
             status = 'error';
-        return status ? `sd-field--${status}` : '';
+        return status !== '' ? `sd-field--${status}` : '';
     }
     componentDidLoad() {
         this.hostElement = this.findHostElement();
@@ -221,7 +163,7 @@ const SdField = class {
         });
     }
     unregisterFromForm() {
-        if (!this.name)
+        if (this.name === '')
             return;
         const formEl = this.el.closest('sd-form');
         formEl?.componentOnReady().then(form => {
@@ -270,21 +212,21 @@ const SdField = class {
             '--sd-field-control-radius': `var(--sd-system-radius-field-${size})`,
             '--sd-field-label-margin-right': `var(--sd-system-space-field-${size}-gap)`,
         };
-        const labelCssVars = this.label
+        const labelCssVars = this.label !== ''
             ? {
                 '--sd-field-label-height': `${labelTokens.height}px`,
                 '--sd-field-label-gap': `${labelTokens.gap}px`,
                 '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
                 '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
                 '--sd-field-label-font-weight': labelTokens.fontWeight,
-                ...(this.labelWidth
+                ...(this.labelWidth !== '' && this.labelWidth !== 0
                     ? {
                         '--sd-field-label-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
                     }
                     : {}),
             }
             : {};
-        const addonCssVars = addon
+        const addonCssVars = addon !== ''
             ? {
                 '--sd-field-addon-padding-x': `${addonTokens.paddingX}px`,
                 '--sd-field-addon-font-size': `${addonTokens.typography.fontSize}px`,
@@ -297,37 +239,38 @@ const SdField = class {
                 '--sd-field-addon-gap': `${addonTokens.gap}px`,
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
                 '--sd-field-addon-justify': FIELD_ADDON_ALIGN_MAP[this.addonAlign] ?? FIELD_ADDON_ALIGN_MAP.start,
-                ...(this.labelWidth
+                ...(this.labelWidth !== '' && this.labelWidth !== 0
                     ? {
                         '--sd-field-addon-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
                     }
                     : {}),
             }
             : {};
-        return (h("div", { key: 'f7cec98818159adf5fd398bd15547ed1ec555092', class: {
+        return (h("div", { key: 'e7424031b85af429369fc9097f9cf7f5f2fd78e2', class: {
                 'sd-field': true,
-                'sd-field--has-label': !!this.label,
-                'sd-field--has-addon': !!addon,
-                [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '2d6ffefc9211137dc215686874060b1d5067031d', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '2163413b937af3c1874f41bc2581a0304b7d069a', class: "sd-field__main", style: this.width
+                'sd-field--has-label': this.label !== '',
+                'sd-field--has-addon': addon !== '',
+                [this.fieldStatus]: this.fieldStatus !== '',
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: 'bc5d3ca5c30a93da12db8268a77cc29b8df1aea6', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '8ca4e32e27efce441f2b6afed9a0688190396da7', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '0dbb6cbe768bac1c64d72d37d270805e16936e24', class: {
+                : {} }, h("div", { key: '8d63e16a5acc4e09c58ae7ad27ec8dc9707075dc', class: {
                 'sd-field__control': true,
-                'sd-field__control--has-addon': !!addon,
-            } }, addon && h("div", { key: '8b4bfbf6ad67084a0bc9c3ff6789936ad895e3c5', class: "sd-field__addon" }, addon), h("slot", { key: '40596847f9bac957a5992364997f0bcd8fd6a704' })), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))))));
+                'sd-field__control--has-addon': addon !== '',
+            } }, addon && h("div", { key: 'bffe6c058ea37692dd03d59983b62f4488e76ce1', class: "sd-field__addon" }, addon), h("slot", { key: '448c1a5a607f9aec68303afb736a4d360bf30452' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
-        if (!label)
+        if (label == null || label === '')
             return null;
-        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
+        return (h("label", { class: "sd-field__label" }, this.icon && (h("sd-icon", { name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
 };
 SdField.style = sdFieldCss();
 
-const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
 
 const SdFloatingPopover = class {
     constructor(hostRef) {
@@ -383,7 +326,7 @@ const SdFloatingPopover = class {
         }
     }
     disconnectedCallback() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.unobserveParent();
         this.wrapper?.remove();
@@ -411,19 +354,19 @@ const SdFloatingPopover = class {
     }
     // 위치 갱신 (scroll / resize)
     updatePosition() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.rafId = requestAnimationFrame(() => {
             if (!this.parentRef || !this.wrapper)
                 return;
             const rect = this.parentRef.getBoundingClientRect();
-            if (!rect.width && !rect.height)
+            if (rect.width === 0 && rect.height === 0)
                 return; // 요소가 보이지 않는 경우
-            const [offsetX, offsetY] = this.offset;
+            const [offsetX, offsetY] = this.offset ?? [0, 0];
             const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
             let top = 0;
             let left = 0;
-            switch (this.placement) {
+            switch (this.placement ?? 'bottom') {
                 case 'top':
                     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
                     left =
@@ -487,7 +430,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return h("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
+        return h("slot", { key: 'b70d70c2ed9d18a191c939b84d5728eb1c450fd0' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -531,9 +474,11 @@ const SdTooltip = class {
     icon = 'helpOutline';
     iconSize = 12;
     label = '';
-    buttonSize = 'sm';
-    buttonVariant = 'primary';
-    noHover = true;
+    name = 'primary_sm';
+    rightIcon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
     sdClass = '';
     showTooltip = false;
     slotContentHTML = '';
@@ -600,18 +545,19 @@ const SdTooltip = class {
             onMouseLeave: () => this.startHideTimer(),
         };
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
-        const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
-        const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: '9e14a4013ea6d04a37529cf7afdb10fe4b3d98eb' }, h("div", { key: 'd98396d4440a795e59b0d2fede7381f8e0da7280', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '59d42ad7aafd94fbe89fc5af3bddf5a305e13a4c', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '88a927d2c3461c7c68865262e8565d0d1385e9af', ref: el => (this.menuEl = el), class: {
+        const hasLabel = this.label !== undefined && this.label !== '';
+        const divTrigger = trigger === 'hover' ? hoverTrigger : hasLabel ? {} : { onClick: toggleTooltip };
+        const buttonClickTrigger = trigger === 'click' && hasLabel ? { onSdClick: toggleTooltip } : {};
+        return (h(Fragment, { key: 'cd01d5f5e9c1c542268d455d97b1bdfe1a2eef2c' }, h("div", { key: '2b883efa4f4ea16b2a544fc43059a139f68e32c1', class: `sd-tooltip-trigger ${this.sdClass !== undefined && this.sdClass !== '' ? this.sdClass : ''}`, ...divTrigger }, hasLabel ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '4d69c1582c3a2fab1fae2e29a4b41999d5dded95', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, h("div", { key: '8e94b33ba40231b26174b28a63d7748649f4d729', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'eb2bcb4e6faa2066e309b662f372fbf8bef42a3e', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'f13005f88ef3194d43de72a87ee78f2c0858682e' })), h("div", { key: '726aff3af3603593d0b994ee17ba88cec071868a', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '535deacc918ec41135ff1c1e24ea5b32b59a4b54', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'c2c70e6360e78f7287acd40a815c558610bf66fa' })), h("div", { key: '9569fbe5648df9c74e7d00b28f91fe8dfa6f6df3', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();
 
-export { SdButton as sd_button, SdField as sd_field, SdFloatingPopover as sd_floating_portal, SdTooltip as sd_tooltip };
+export { SdField as sd_field, SdFloatingPopover as sd_floating_portal, SdTooltip as sd_tooltip };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const SdForm = class {
     constructor(hostRef) {
@@ -19,15 +19,15 @@ const SdForm = class {
             if (elA === elB)
                 return 0;
             const position = elA.compareDocumentPosition(elB);
-            if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+            if ((position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0)
                 return -1;
-            if (position & Node.DOCUMENT_POSITION_PRECEDING)
+            if ((position & Node.DOCUMENT_POSITION_PRECEDING) !== 0)
                 return 1;
             return 0;
         });
     }
     async sdRegisterField(field) {
-        if (!field.name) {
+        if (field.name === '') {
             console.warn('[sd-form] field.name is required');
             return;
         }
@@ -76,7 +76,7 @@ const SdForm = class {
         this.sdSubmit.emit();
     }
     render() {
-        return (h("form", { key: 'c3fafb4169bddbd6911914ebc694a977fa11b511', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '5be1d23c35c052fdf5d8fb961fa931074eb59ee6' })));
+        return (h("form", { key: '197851b7d0ac6af39be67a2b5d2846370cc3ed39', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '33adfc4e9d40aa48b22755a98429ab8e0a32792f' })));
     }
 };
 

package/dist/esm/sd-ghost-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Cnwbjz1F.js';
+import { r as registerInstance, c as createEvent, h } from './index-0U6dRjlq.js';
 
 const ghostButton = {
 	xxs: {
@@ -142,7 +142,7 @@ const SdGhostButton = class {
         this.warnIfMissingAriaLabel();
     }
     warnIfMissingAriaLabel() {
-        const missing = !this.ariaLabel.trim();
+        const missing = (this.ariaLabel ?? '').trim() === '';
         if (!missing) {
             this.hasWarnedMissingAriaLabel = false;
             return;
@@ -153,21 +153,23 @@ const SdGhostButton = class {
         this.hasWarnedMissingAriaLabel = true;
     }
     render() {
-        const sizeConfig = GHOST_BUTTON_SIZES[this.size];
+        const size = this.size ?? 'sm';
+        const intent = this.intent ?? 'default';
+        const sizeConfig = GHOST_BUTTON_SIZES[size] ?? GHOST_BUTTON_SIZES.sm;
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
-        const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
+            ? GHOST_BUTTON_DISABLED_COLORS[intent]
+            : GHOST_BUTTON_CONTENT_COLORS[intent];
+        const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
+        return (h("button", { key: '789d7ad03fd9fd3164bd76b4490c06d1a2ed5ca0', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
-                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '0cac7bcc4b6ad28d88c9ab4bc30e59dd92f45992', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();