@sellmate/design-system 1.0.60 → 1.0.61

package/dist/cjs/sd-date-range-picker.cjs.entry.js

@@ -1,21 +1,10 @@
 'use strict';
 
 var index = require('./index-BQt-JC6r.js');
-var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
+var index$1 = require('./index-BUvXpPc3.js');
+var sdDatePicker_config = require('./sd-date-picker.config-DWC_aiD2.js');
 
-const addDays = (inputDate, days) => {
-    const [year, month, day] = inputDate.split('-').map(Number);
-    const date = new Date(year, month - 1, day); // month는 0부터 시작하므로 -1
-    // 날짜 계산
-    date.setDate(date.getDate() + days);
-    // yyyy-mm-dd 형식으로 변환
-    const resultYear = date.getFullYear();
-    const resultMonth = String(date.getMonth() + 1).padStart(2, '0');
-    const resultDay = String(date.getDate()).padStart(2, '0');
-    return `${resultYear}-${resultMonth}-${resultDay}`;
-};
-
-const sdDateRangePickerCss = () => `sd-date-range-picker.sc-sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .date-icon.sc-sd-date-range-picker{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-date-range-picker--disabled.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{color:#888888 !important}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-field__control.sc-sd-date-range-picker{min-width:210px}sd-date-range-picker.sc-sd-date-range-picker .sd-field.sc-sd-date-range-picker .sd-input__native.sc-sd-date-range-picker{margin-left:17px !important}.sd-date-range-picker__menu.sc-sd-date-range-picker{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__header.sc-sd-date-range-picker .header-label.sc-sd-date-range-picker{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker{width:266px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.sc-sd-date-range-picker{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-prev.sc-sd-date-range-picker{left:5px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-header.sc-sd-date-range-picker button.header-button-next.sc-sd-date-range-picker{right:5px;left:auto}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-days.sc-sd-date-range-picker .day.sc-sd-date-range-picker{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .calendar-container.sc-sd-date-range-picker .calendar-body.sc-sd-date-range-picker{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu.sc-sd-date-range-picker .sd-date-range-picker__body.sc-sd-date-range-picker .separator.sc-sd-date-range-picker{width:1px;background-color:#D8D8D8}`;
+const sdDateRangePickerCss = () => `sd-date-range-picker{display:inline-flex}sd-date-range-picker sd-portal{display:none}sd-date-range-picker .sd-date-range-picker{position:relative;width:100%;height:100%}`;
 
 const SdDateRangePicker = class {
     constructor(hostRef) {
@@ -23,178 +12,108 @@ const SdDateRangePicker = class {
         this.update = index.createEvent(this, "sdUpdate", 7);
         this.viewChange = index.createEvent(this, "sdViewChange", 7);
     }
+    static CLOSE_ANIMATION_DURATION = 150;
     get el() { return index.getElement(this); }
-    value = ['', ''];
-    label;
+    value = null;
+    size = 'sm';
+    placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
     selectable;
     maxRange;
     disabled = false;
-    placeholder = '';
+    width = '';
+    // sd-field 공통 props
+    label = '';
+    addonLabel = '';
+    hint = '';
+    errorMessage = '';
+    fieldName = '';
+    rules = [];
+    error = false;
+    icon = undefined;
+    labelTooltip = '';
+    labelTooltipProps = null;
     isOpen = false;
-    dateRange = this.value;
-    hoverDate = '';
-    prevYear = Number(this.dateRange[0].split('-')[0]);
-    prevMonth = Number(this.dateRange[0].split('-')[1]);
+    isAnimatingOut = false;
+    focused = false;
+    hovered = false;
     update;
     viewChange;
-    inputEl;
-    dateUtil = useDatePicker.useDatePicker();
-    tempDateRange = ['', ''];
-    componentWillLoad() {
-        this.syncFromValue(this.value);
-    }
-    onValueChange(newValue) {
-        this.dateRange = [...newValue];
-    }
-    syncFromValue(value) {
-        this.dateRange = [...value];
-        this.resetCalendarByDateRange(value);
-    }
-    /* ----------------------------------
-     * Calendar View Logic
-     * ---------------------------------- */
-    resetCalendarByDateRange(range) {
-        // this.dateRange = this.value;
-        const start = range[0] || useDatePicker.today;
-        const end = range[1] || start;
-        const [startYear, startMonth] = start.split('-').map(Number);
-        const [todayYear, todayMonth] = useDatePicker.today.split('-').map(Number);
-        if (end <= useDatePicker.today) {
-            // A. 완전 과거 검색(당월 포함X): 좌측 = 시작월 / 우측 = 종료월
-            this.prevYear = startYear;
-            this.prevMonth = startMonth;
-        }
-        else if (start < useDatePicker.today && end > useDatePicker.today) {
-            // B. 과거~미래 걸침(당월 포함O): 좌측 = 오늘의 달
-            this.prevYear = todayYear;
-            this.prevMonth = todayMonth;
-        }
-        else {
-            // C. 완전 미래 검색(당월 포함X): 좌측 = 시작월
-            this.prevYear = startYear;
-            this.prevMonth = startMonth;
-        }
-    }
-    get nextYear() {
-        return this.prevMonth === 12 ? this.prevYear + 1 : this.prevYear;
-    }
-    get nextMonth() {
-        return this.prevMonth === 12 ? 1 : this.prevMonth + 1;
-    }
-    get prevCalendar() {
-        return this.dateUtil.createCalendar(this.prevYear, this.prevMonth);
-    }
-    get nextCalendar() {
-        return this.dateUtil.createCalendar(this.nextYear, this.nextMonth);
-    }
-    setPrevYear(year) {
-        this.prevYear = year;
-    }
-    setPrevMonth(month) {
-        this.prevMonth = month;
-    }
-    updateYearMonth(type) {
-        const { newYear, newMonth } = this.dateUtil.calculateYearMonth(this.prevYear, this.prevMonth, type);
-        this.setPrevYear(newYear);
-        this.setPrevMonth(newMonth);
-        this.viewChange.emit({ year: newYear, month: newMonth });
-    }
-    setHoverDate(date) {
-        this.hoverDate = date;
+    triggerRef;
+    formField;
+    closeAnimationTimer;
+    internalName = index$1.nanoid();
+    watchIsOpen(newValue) {
+        this.focused = newValue;
     }
-    setDateRange(dateRange) {
-        this.dateRange = dateRange;
+    async sdValidate() {
+        return this.formField?.sdValidate();
     }
-    /* ----------------------------------
-     * UI Helpers
-     * ---------------------------------- */
-    formatDate(index, day) {
-        return this.dateUtil.formatDate(index === 0 ? this.prevYear : this.nextYear, index === 0 ? this.prevMonth : this.nextMonth, day);
+    async sdReset() {
+        return this.formField?.sdReset();
     }
-    getDateBoxType(date) {
-        const [start, end] = this.dateRange;
-        if (date === start)
-            return end ? 'start' : this.hoverDate < this.dateRange[0] ? 'end' : 'start';
-        if (date === end)
-            return 'end';
-        return '';
+    async sdResetValidate() {
+        return this.formField?.sdResetValidation();
     }
-    isDateInRange(date) {
-        const [start, end] = this.dateRange;
-        // 1. 날짜 범위가 완전히 선택된 경우
-        if (start && end) {
-            return date >= start && date <= end;
-        }
-        // 2. hover 상태의 날짜 범위를 확인
-        if (!this.hoverDate || !start || end) {
-            return false;
-        }
-        // 3. dateRange[0]과 hoverDate를 기준으로 범위 계산
-        const [from, to] = start <= this.hoverDate ? [start, this.hoverDate] : [this.hoverDate, start];
-        return date >= from && date <= to;
-    }
-    isDisabledDate(date) {
-        const [start, end] = this.dateRange;
-        if (this.maxRange && start && !end) {
-            const minDate = addDays(start, -this.maxRange);
-            const maxDate = addDays(start, this.maxRange);
-            return !(minDate <= date && date <= maxDate);
-        }
-        if (!this.selectable || !this.selectable[0] || !this.selectable[1]) {
-            return false;
-        }
-        return !(date >= this.selectable[0] && date <= this.selectable[1]);
-    }
-    /* ----------------------------------
-     * Interaction
-     * ---------------------------------- */
-    openMenu() {
+    closeDropdown() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        this.isAnimatingOut = true;
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
+        this.closeAnimationTimer = setTimeout(() => {
+            this.isAnimatingOut = false;
+        }, SdDateRangePicker.CLOSE_ANIMATION_DURATION);
+    }
+    handleTriggerClick = () => {
         if (this.disabled)
             return;
-        this.tempDateRange = [...this.dateRange];
-        this.resetCalendarByDateRange(this.dateRange);
-        this.isOpen = true;
-    }
-    closeMenu = () => {
-        if (!this.dateRange[0] || !this.dateRange[1]) {
-            this.dateRange = [...this.tempDateRange];
+        if (this.isOpen) {
+            this.closeDropdown();
         }
-        this.isOpen = false;
-    };
-    handleDateClick(index, day) {
-        this.setHoverDate('');
-        const selectedDate = this.formatDate(index, day);
-        if (!this.dateRange[0] || !!this.dateRange[1] || selectedDate < this.dateRange[0]) {
-            this.setDateRange([selectedDate, '']);
-            return; // 아직 완료 아님
+        else {
+            if (this.closeAnimationTimer)
+                clearTimeout(this.closeAnimationTimer);
+            this.isAnimatingOut = false;
+            this.isOpen = true;
         }
-        const newRange = [this.dateRange[0], selectedDate];
-        this.setDateRange(newRange);
-        this.value = newRange;
-        this.update.emit?.(newRange);
-        this.isOpen = false;
+    };
+    handleSelect = (e) => {
+        this.closeDropdown();
+        this.value = e.detail;
+        const nextValue = this.value;
+        requestAnimationFrame(() => {
+            this.update.emit(nextValue);
+        });
+    };
+    handleViewChange = (e) => {
+        this.viewChange.emit(e.detail);
+    };
+    get displayText() {
+        if (!this.value || !this.value[0] || !this.value[1])
+            return '';
+        return `${this.value[0]} ~ ${this.value[1]}`;
     }
-    handleDateHover(index, day) {
-        const hoverDate = this.formatDate(index, day);
-        this.setHoverDate(hoverDate);
+    disconnectedCallback() {
+        if (this.closeAnimationTimer)
+            clearTimeout(this.closeAnimationTimer);
     }
     render() {
-        return (index.h("div", { key: 'ed71379abf9d60bfa21c9888ba0f84f543bc0fe2', class: {
-                'sd-date-range-picker': true,
-                'sd-date-range-picker--disabled': this.disabled,
-            } }, index.h("sd-input", { key: 'd9b4269ee29ddf23dd80b5bcad2ded0d5edae8a6', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', addonLabel: this.label, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, index.h("sd-icon", { key: 'a30448daa738ee75925974735f7a9948a47761e1', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (index.h("sd-portal", { key: '553abd0af76848be54788518507fbf0cc20db111', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, index.h("div", { key: '152fb19e5c8dbd5e5f978b11868cc71b382255d8', class: "sd-date-range-picker__menu" }, index.h("div", { key: '5d290d39d6aa8cc0d3a4394ac2f1d4bc93428bb3', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, index.h("button", { key: 'b20caad91457bda87690629aa3fc34d4d2c5a673', type: "button", name: "prev", title: "Previous", onClick: () => {
-                this.setPrevYear(this.prevYear - 1);
-                this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, index.h("sd-icon", { key: '5f0e8014992b7269aed7d97a4a56263349c90afa', name: "arrowLeft", size: "12", color: "#CCCCCC" })), index.h("div", { key: 'f324d84e338aa2779e471a123fc7b5220900389d', class: "header-label" }, this.prevYear), index.h("button", { key: '18e331eb0c8fe3cc1eba2b718433ca7f7ec17b3e', type: "button", name: "next", title: "Next", onClick: () => {
-                this.setPrevYear(this.prevYear + 1);
-                this.viewChange.emit({ year: this.prevYear, month: this.prevMonth });
-            } }, index.h("sd-icon", { key: '1ec935fbbb3ecbafb42df34905f62753dfd49da2', name: "arrowRight", size: "12", color: "#CCCCCC" }))), index.h("div", { key: '47af9712b96158741a3fed052f4b1eb7bca08eef', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index$1) => (index.h(index.Fragment, null, index$1 === 1 && index.h("div", { class: "separator" }), index.h("div", { key: index$1, class: "calendar-container" }, index.h("div", { class: "calendar-header" }, index.h("button", { type: "button", name: "month", title: "Month", class: index$1 === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index$1 === 0 ? 'prev' : 'next') }, index.h("sd-icon", { name: index$1 === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index$1 === 0
-            ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
-            : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), index.h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (index.h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), index.h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (index.h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index$1, Number(day))), type: this.getDateBoxType(this.formatDate(index$1, Number(day))), isToday: useDatePicker.today === this.formatDate(index$1, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index$1, Number(day))), inRange: this.isDateInRange(this.formatDate(index$1, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index$1, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index$1, Number(day)), onSdClick: () => this.handleDateClick(index$1, Number(day)), onSdMouseOver: () => this.handleDateHover(index$1, Number(day)) }))))))))))))));
+        const sizeTokens = sdDatePicker_config.DATEPICKER_SIZE_MAP[this.size] ?? sdDatePicker_config.DATEPICKER_SIZE_MAP.md;
+        const cssVars = {
+            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
+            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
+            '--sd-system-color-field-border-default': sdDatePicker_config.DATEPICKER_COLORS.border.default,
+            '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
+            '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
+        };
+        return (index.h("sd-field", { key: '5c381ba40914b02d248b77852e8297ba367faed7', name: this.fieldName || this.internalName, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'dee79baa195056a45b0af1c106b4f8890fc370a7', class: "sd-date-range-picker", ref: el => {
+                this.triggerRef = el;
+            } }, index.h("sd-date-picker-trigger", { key: 'e5b46762012b35c8be2c56cbfbec22682ba7a3ed', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '47d0315e5a7baf3583286a730126ba0c4fdc1945', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-range-picker-calendar", { key: '58b8765eacd17d7f7362ed67b8919eee8e89c68f', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
-        "value": [{
-                "onValueChange": 0
+        "isOpen": [{
+                "watchIsOpen": 0
             }]
     }; }
 };

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

@@ -2,8 +2,8 @@
 
 var index = require('./index-BQt-JC6r.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
-var sdButtonV2_config = require('./sd-button-v2.config-B4___nhv.js');
-var component_button = require('./component.button-DUsddONR.js');
+var sdButtonV2_config = require('./sd-button-v2.config-CnqCQQMi.js');
+var component_button = require('./component.button-cqV-iCG5.js');
 
 const color = {
 	bg: {
@@ -19,20 +19,15 @@ var systemTokens = {
 
 const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, sdButtonV2_config.BUTTON_CONFIG[name]]));
-const DROPDOWN_BUTTON_MIN_WIDTHS = {
-    xs: component_button.buttonTokens.dropdown.xs.minWidth,
-    sm: component_button.buttonTokens.dropdown.sm.minWidth,
-    md: component_button.buttonTokens.dropdown.md.minWidth,
-};
 const PRESET_HOVER_BACKGROUNDS = sdButtonV2_config.PRESET_HOVER_BACKGROUNDS;
 const PRESET_CONTENT_COLORS = sdButtonV2_config.PRESET_CONTENT_COLORS;
 const PRESET_BORDER_COLORS = sdButtonV2_config.PRESET_BORDER_COLORS;
 const PRESET_DIVIDER_COLORS = {
-    primary: component_button.buttonTokens.brand.strong.dropdown.divider,
-    secondary: component_button.buttonTokens.brand.subtle.dropdown.divider,
+    primary: component_button.buttonTokens.button.brand.strong.dropdown.divider,
+    secondary: component_button.buttonTokens.button.brand.subtle.dropdown.divider,
     primary_outline: PRESET_BORDER_COLORS.primary_outline,
     neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
-    danger: component_button.buttonTokens.danger.strong.dropdown.divider,
+    danger: component_button.buttonTokens.button.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
 const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
@@ -62,13 +57,13 @@ const PRESET_MENU_ITEM_ACTIVE_COLORS = {
     danger: MENU_ITEM_ACTIVE_COLOR,
     danger_outline: MENU_ITEM_ACTIVE_COLOR,
 };
-const DROPDOWN_DISABLED_BACKGROUND = component_button.buttonTokens.bg.disabled;
-const DROPDOWN_DISABLED_TEXT = component_button.buttonTokens.text.disabled;
-const DROPDOWN_DISABLED_BORDER = component_button.buttonTokens.border.disabled;
+const DROPDOWN_DISABLED_BACKGROUND = component_button.buttonTokens.button.bg.disabled;
+const DROPDOWN_DISABLED_TEXT = component_button.buttonTokens.button.text.disabled;
+const DROPDOWN_DISABLED_BORDER = component_button.buttonTokens.button.border.disabled;
 const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
 const getDropdownButtonPreset = (value) => sdButtonV2_config.getPresetName(value);
 
-const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-min-width:106px;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-text-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-width:var(--sd-dropdown-button-min-width);min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(    --sd-dropdown-button-menu-item-active-color   )}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
+const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-current-content:var(--sd-dropdown-button-content);--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-text-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-sm, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-current-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);--sd-dropdown-button-current-content:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px);transition:transform 0.2s ease}.sd-dropdown-button__trigger-icon--open{transform:rotate(180deg)}.sd-dropdown-button__menu{position:relative;display:grid;width:max-content;min-width:var(--sd-dropdown-button-menu-min-width, max-content);max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-color);display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-current-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{--sd-dropdown-button-menu-item-current-color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
 
 const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     constructor(hostRef) {
@@ -257,8 +252,7 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (index.h("div", { key: 'ec3cf7d184cbf49cc60a633b4a5de719a5903098', class: "sd-dropdown-button" }, index.h("button", { key: '02a7208bc16fbd89af72d4dbc885951949507e11', 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-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
+        return (index.h("div", { key: 'eaaa15c76c5c05dd8a7e103368ae5a884fd999b1', class: "sd-dropdown-button" }, index.h("button", { key: '6e9dd2f7e7791ad7a4a17de1189bfc783cf61d69', 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],
@@ -268,10 +262,10 @@ const SdDropdownButton = class extends baseDropdownEvent.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,
-            } }, index.h("span", { key: '04f3d92100e85b3aad59541a19002dc395c783fc', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '72a49942403856fecfc2415d7318ef549f80905c', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: 'cc7926fb8b3eec86dfcbb3c0aec5d193fd202cca', class: {
+            } }, index.h("span", { key: '921f7f8c98537dd01645a95bef0468768dd8571c', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: 'b871623ea1ba07cf797fd98e3057b01e7263234f', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '6c42e134ca5ed5291277c0316bceaf5bd6859363', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, index.h("sd-icon", { key: '4540ee571613668bae9157221ff8550a07cd35fa', name: "chevronDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, index.h("sd-icon", { key: 'ae1df86b93b174cfc488f3fa079c62ff55ae2e67', name: "chevronDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -67,7 +67,7 @@ const SdForm = class {
         this.submitSuccess.emit();
     }
     render() {
-        return (index.h("form", { key: '2a72e0fb172294913a22560311e8dfcc4b151968', onSubmit: e => this.onSubmit(e), class: this.formClass }, index.h("slot", { key: 'd0bd0c7f915e10c7fd9aa36af68b2020035a43d4' })));
+        return (index.h("form", { key: 'd37e7f5291b9f340ed020aadbc7e111c6ac9d375', onSubmit: e => this.onSubmit(e), class: this.formClass }, index.h("slot", { key: 'be3d12eb60e10a5b77dc9bd150ac2be23e08f3f0' })));
     }
 };
 

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

@@ -21,7 +21,7 @@ const ghostButton = {
 	},
 	lg: {
 		size: "62",
-		icon: "36"
+		icon: "32"
 	},
 	radius: "4",
 	hover: {
@@ -47,7 +47,15 @@ const ghostButton = {
 		hover: {
 			bg: "#0075FF"
 		}
-	}};
+	},
+	inverse: {
+		content: "#FFFFFF",
+		disabled: "#E1E1E1",
+		hover: {
+			bg: "#FFFFFF"
+		}
+	}
+};
 var ghostButtonTokens = {
 	ghostButton: ghostButton
 };
@@ -81,13 +89,21 @@ const GHOST_BUTTON_CONTENT_COLORS = {
     default: ghostButtonTokens.ghostButton.default.content,
     danger: ghostButtonTokens.ghostButton.danger.content,
     action: ghostButtonTokens.ghostButton.action.content,
+    inverse: ghostButtonTokens.ghostButton.inverse.content,
 };
 const GHOST_BUTTON_HOVER_BG_COLORS = {
     default: ghostButtonTokens.ghostButton.default.hover.bg,
     danger: ghostButtonTokens.ghostButton.danger.hover.bg,
     action: ghostButtonTokens.ghostButton.action.hover.bg,
+    inverse: ghostButtonTokens.ghostButton.inverse.hover.bg,
 };
 const GHOST_BUTTON_DISABLED_ICON = ghostButtonTokens.ghostButton.icon.disabled;
+const GHOST_BUTTON_DISABLED_COLORS = {
+    default: GHOST_BUTTON_DISABLED_ICON,
+    danger: GHOST_BUTTON_DISABLED_ICON,
+    action: GHOST_BUTTON_DISABLED_ICON,
+    inverse: ghostButtonTokens.ghostButton.inverse.disabled,
+};
 
 const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}`;
 
@@ -127,10 +143,10 @@ const SdGhostButton = class {
     render() {
         const sizeConfig = GHOST_BUTTON_SIZES[this.size];
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_ICON
+            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
             : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (index.h("button", { key: '8d6aa7e82d3e3f31638e98870283723fdb87e0e2', class: {
+        return (index.h("button", { key: '783888ed2c124bf8e08698de0bc2e904b86722e9', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -139,7 +155,7 @@ const SdGhostButton = class {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, index.h("sd-icon", { key: 'd858b173e3f93c49703b31cde6be4fa81440ae7a', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, index.h("sd-icon", { key: '4ae4347b169267e6964c461126b6c9a4281578bb', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();

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

@@ -55,9 +55,9 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h("div", { key: 'd98a48deb586592dbb379acb4e3725a97601dccd', class: "sd-guide", style: {
+        return (index.h("div", { key: '0f70d3686c37c029635c93a8ad8f937fb2ca73c2', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, index.h("sd-button", { key: '35b3215ac7d73f2ae9375ab46b2981b314769fdd', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '56bda42619f3f10fbdc428e3d11abc1a4a812029', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'a73954469eb2f711ece68c8b17fe2d197b4fd515', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: 'bf07222fe61b7121d99f0ae39e1e7ffb539db1de', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: 'c9b8d6c2a311e7a83e9c8b2568b3010e5619ad51', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: 'da280eb73610cb0f70c5adbf10e413ea4d8a4629', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'ec73b6ed0777b464208e9bf94d96b044d8770714', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: '18a221c3dedb1882479c2a567b3c870d7dfd157b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '5a8abec7b5c3246a5eb6a7ec45a3c16a05ccab72', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, index.h("sd-button", { key: 'f07235cc53a908237af2f13a98f325340c83fd0e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (index.h("sd-portal", { key: '9c5ade0db41a02a343bb77bc1dcb44d12dba6c04', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'd59caf4107b678ce132accfe9f392c3cfa6b35f4', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '22aa97a939e27454dec067effc6911aea6ace2a4', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '6bf404b6718bbd036acff51101538d967a2cd642', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: 'a63aa9263715f57f2e8bf977c4849f868803a704', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '8ba1969ada651d3226058bb9095ae8b794be1759', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: '41dd2533e146eae12ee7367a243e819362597761', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: 'b45bfd9ff793f0c0860789d16c1c17fef2ad01d5', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -2,10 +2,10 @@
 
 var index = require('./index-BQt-JC6r.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var component_textinput = require('./component.textinput-BWW8c3OY.js');
+var component_textinput = require('./component.textinput-C4SsDjA1.js');
 
-const sm = component_textinput.inputTokens.input.sm;
-const md = component_textinput.inputTokens.input.md;
+const sm = component_textinput.inputTokens.textinput.sm;
+const md = component_textinput.inputTokens.textinput.md;
 const INPUT_SIZE_MAP = {
     sm: {
         height: sm.height,
@@ -27,11 +27,11 @@ const INPUT_SIZE_MAP = {
     },
 };
 const INPUT_COLORS = {
-    text: component_textinput.inputTokens.input.text,
-    icon: component_textinput.inputTokens.input.icon,
+    text: component_textinput.inputTokens.textinput.text,
+    icon: component_textinput.inputTokens.textinput.icon,
 };
 
-const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#D8D8D8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0}sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__password-icon{cursor:not-allowed;pointer-events:none}`;
+const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0}sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__password-icon{cursor:not-allowed;pointer-events:none}`;
 
 const SdInput = class {
     constructor(hostRef) {
@@ -148,12 +148,12 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (index.h("sd-field", { key: 'd5f554784340cbb9246165fb15124098e4f7165b', name: this.name, label: this.label, addonLabel: this.addonLabel, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: '02225d57c5bd17dbe78c680f243ad3a9a4ab3b5d', class: "sd-input__content" }, index.h("slot", { key: '1011876ea9726e62a19047b28a82932e43762436', name: "prefix" }), index.h("input", { key: '10f4c594382aa002ba09a0012979ff930154fc7a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '007d15357a81f13ab4db5ddf237110b9d1f1728b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: '92dfd40117cccdb48ebfc0056aa9e093546bbf6b', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '16881490eb9d8d08aa0788be2dbb845b12f50269', name: this.name, label: this.label, addonLabel: this.addonLabel, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: '04e71967c3b3f7bf4589a3aaf4505c5d67d615da', class: "sd-input__content" }, index.h("slot", { key: '18476a19c8825734e475116586bab2711c1d84e3', name: "prefix" }), index.h("input", { key: '7600e0ade86d1bca8ba6197d49bd72ef4d0778dd', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), index.h("slot", { key: '5c98ef1acdb26a1c0f89fc04101c0315b017c08a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: 'f188270be3635c68d99a453eaba61f53d6bb2bc7', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: 'a4bef720b55a94a4a6ada002f4a2ffd1d0f8da24', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: 'cedaceae0b81e007e4672a57c950bd6b23d045cd', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;
@@ -194,17 +194,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (index.h("div", { key: '2d211645dc4041411e187f248a260a23b7c544f6', class: {
+        return (index.h("div", { key: '356f1b606a50d6a247793aebd1609f509a08784e', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: 'c609af0ab36359c8ccaea5827821dbc509d13eac', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: '99162b5eeb831b771666246ecbd223c0a1b93d9c', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, index.h("sd-icon", { key: '96a511b1f8625c883ec50d5e2985ff396d7b57c7', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, index.h("sd-icon", { key: 'e8929cfab6ab5a483531c939de1b4c0c11f1b145', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();