@sellmate/design-system 1.0.76 → 1.0.77

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdDatePicker_config = require('./sd-date-picker.config-B705zdZd.js');
 
@@ -102,9 +102,9 @@ const SdDatePicker = class {
             '--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: '97dcd4d3065ba7c0fa587b3d533dcda82b87c188', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '9c0a6874eb6fbf3e8a928048f189d3b139e385df', class: "sd-date-picker", ref: el => {
+        return (index.h("sd-field", { key: 'd55b2123cc862d5f12fdd429b02b622946b58cc4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '79e47e4e02e8b30dc2651a9c4aab3950a8662f52', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: 'e54065e86cb36c8abed1041a2d13edcbba861d8f', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '96c2aa277f54315ac2f6e29b861ebb94b3cc4f75', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: 'ea2513fb3d150a53895b6f657a7a6acc5541045f', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, index.h("sd-date-picker-trigger", { key: '7b09873b1e58aed36d4fb0dadb02d21ea6c2b309', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'fd60a9df30dfc459798a8e537acdf16ed9f94844', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: '0478f726cb51fe533b829f3eb0ce46d2fbf0ba94', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 var sdDatePicker_config = require('./sd-date-picker.config-B705zdZd.js');
 
@@ -267,7 +267,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (index.h(index.Fragment, { key: 'b420e317ccefa8b143d781d916c0a60c8be15d2f' }, index.h("div", { key: 'ec537bf3ed58f6b18e80f885d78d8e5dcca7ecfe', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '70afdc7311c5707c6d639034fa14c6f5ca2aa3d2', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: 'a400c8d9d3a0b1a4e13e7d4de004da550e91916f', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (index.h(index.Fragment, { key: 'acc32d9c349c4cee32bb923ce66d17122527b524' }, index.h("div", { key: 'bd579429ae609c3ff21a542bf69c1dc9a907846a', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '8a46d922fcaa09bd7f778d00e77324d1710b92c7', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '8234838995f1e5d945f85169e702cb0b32018f36', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdDatePicker_config = require('./sd-date-picker.config-B705zdZd.js');
 

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

@@ -1,10 +1,97 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
-var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
+var index = require('./index-CaGGRpd8.js');
 var sdButtonV2_config = require('./sd-button-v2.config-CnqCQQMi.js');
 var component_button = require('./component.button-cqV-iCG5.js');
-var system = require('./system-BbCUNhDJ.js');
+var system = require('./system-DRemSdU1.js');
+
+class DropdownManager {
+    static instance;
+    activeDropdowns = new Set();
+    static getInstance() {
+        if (!DropdownManager.instance) {
+            DropdownManager.instance = new DropdownManager();
+        }
+        return DropdownManager.instance;
+    }
+    register(component) {
+        this.activeDropdowns.add(component);
+    }
+    unregister(component) {
+        this.activeDropdowns.delete(component);
+    }
+    openDropdown(targetComponent) {
+        // 다른 모든 드롭다운 닫기
+        this.activeDropdowns.forEach(component => {
+            if (component !== targetComponent && component.isOpen) {
+                component.closeDropdown();
+            }
+        });
+    }
+    closeAllDropdowns() {
+        this.activeDropdowns.forEach(component => {
+            if (component.isOpen) {
+                component.closeDropdown();
+            }
+        });
+    }
+}
+const dropdownManager = DropdownManager.getInstance();
+
+// 여러 select를 동시에 사용할때에 이벤트 리스너의 등록이 충돌나는 문제를 해결하기 위한 Base class
+// 각 드롭다운 컴포넌트는 이 클래스를 상속 및 구현 필요
+// 기본적으로 click, keydown 추상 이벤트를 구현해야하고
+// isOpen가 true일때에만 이벤트 등록 그외에는 이벤트 클리닝을 수행
+// 추후 필요한 이벤트는 이곳에 추가하여 추가 구현 후 사용
+// 별도로 드롭다운 전용의 Base class가 아닌 공통적으로 사용할 수 있는 Base class가 필요할지 검토 필요
+class BaseDropdownEvent {
+    documentClickHandler;
+    documentKeydownHandler;
+    // 컴포넌트 생명주기에서 호출할 메서드들
+    initializeEvent() {
+        dropdownManager.register(this);
+        this.initializeEventHandlers();
+    }
+    cleanupEvent() {
+        dropdownManager.unregister(this);
+        this.cleanup();
+    }
+    initializeEventHandlers() {
+        this.documentClickHandler = (event) => this.handleDocumentClick(event);
+        this.documentKeydownHandler = (event) => this.handleDocumentKeydown(event);
+    }
+    addGlobalEventListeners() {
+        if (this.documentClickHandler) {
+            document.addEventListener('click', this.documentClickHandler);
+        }
+        if (this.documentKeydownHandler) {
+            document.addEventListener('keydown', this.documentKeydownHandler);
+        }
+    }
+    removeGlobalEventListeners() {
+        if (this.documentClickHandler) {
+            document.removeEventListener('click', this.documentClickHandler);
+        }
+        if (this.documentKeydownHandler) {
+            document.removeEventListener('keydown', this.documentKeydownHandler);
+        }
+    }
+    onDropdownToggle(isOpen) {
+        if (isOpen && !this.disabled) {
+            dropdownManager.openDropdown(this);
+            this.addGlobalEventListeners();
+        }
+        else {
+            this.removeGlobalEventListeners();
+        }
+    }
+    cleanup() {
+        this.removeGlobalEventListeners();
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+}
 
 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]]));
@@ -59,7 +146,7 @@ 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-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-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:#0075FF;--sd-dropdown-button-disabled-bg:var(--sd-button-button-bg-disabled, #E1E1E1);--sd-dropdown-button-disabled-content:var(--sd-button-button-text-disabled, #888888);--sd-dropdown-button-disabled-border:var(--sd-button-button-border-disabled, #CCCCCC);display:inline-flex;align-items:stretch;justify-content:space-between;min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-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-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-xs-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-sm-typography-text-decoration,     none   )}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-button-md-height, 36px);--sd-dropdown-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(     --sd-button-button-md-typography-text-decoration,     none   );border-radius:var(--sd-button-button-radius-md, 6px)}.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 {
+const SdDropdownButton = class extends BaseDropdownEvent {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -246,7 +333,7 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (index.h("div", { key: '3a9e74c689c0345c89dbaeba5814164b72fe7108', class: "sd-dropdown-button" }, index.h("button", { key: '1633f3a0348082ec2433a6a1e7c41a64a797a725', 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 (index.h("div", { key: 'ce06d2b7e13cb234bb6e7393939d2ccd834801a5', class: "sd-dropdown-button" }, index.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: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -256,10 +343,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: '7378e3aa3c4cf2991f3a92511f10ca1834af9563', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: 'd5b59ccaad1985e3a50bb9a53b0a156a1e2e28a9', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: 'a24ed74d95ac1866abf9f3ed7a1c4b7bfe2c56c8', class: {
+            } }, index.h("span", { key: '2baea4f0777ec766625d4ae1fb14739aa61ca114', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: 'b37a94dd23d26a1444ddccc192b2a5ab2388bc64', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: 'b903ff916c3ae1ab189cd08877a57940e45d8aeb', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, index.h("sd-icon", { key: '7cb8cf5665f3ee2e252f4c0471daee31f4af0c7b', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, index.h("sd-icon", { key: '2eac1eabd2677decb0c1cfe4f518a7da9aca60ff', 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/cjs/sd-file-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var index$1 = require('./index-BUvXpPc3.js');
 
 const filepicker = {
@@ -107,7 +107,7 @@ const SdFilePicker = class {
         if (this.fileInputRef) {
             this.fileInputRef.value = '';
         }
-        await this.formField?.sdReset();
+        await this.formField?.sdResetValidation();
     }
     async sdResetValidate() {
         await this.formField?.sdResetValidation();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const SdForm = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const ghostButton = {
 	xxs: {
@@ -160,7 +160,7 @@ const SdGhostButton = class {
             ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
             : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (index.h("button", { key: 'd7f6fcbed3526ffb8b90b205dbe2bbf55abf03a0', class: {
+        return (index.h("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -169,7 +169,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: '9efc3a3fbf7878a9a50b2efbf054b335d9cddfe0', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, index.h("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
-var system = require('./system-BbCUNhDJ.js');
+var index = require('./index-CaGGRpd8.js');
+var system = require('./system-DRemSdU1.js');
 
 const guide = {
 	button: {

package/dist/cjs/{sd-input_2.cjs.entry.js → sd-input.cjs.entry.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var component_textinput = require('./component.textinput-BpXDeZPD.js');
 
@@ -150,12 +150,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: 'ff73dfa4d23c7bf1a29f853d50e0d31bddb094ea', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: '0a986cccfbd55984a51676cbf5393634819e766d', class: "sd-input__content" }, index.h("slot", { key: '068bfd70601f3b191a51bb45ac02679acf99a069', name: "prefix" }), index.h("input", { key: '54dbd7b7e4bffcfa25b9d68800fb334c0dfa0da0', 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: 'c0e03839176c6612eb8b0532bce3341de3db90c3', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: '0019f58900c721c52216f7686b8b198f855c76ec', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: 'ff139feaafdaa57e012dc559ab1a0db26dfd97b0', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: '188f24de316b14315fa0bdf312c58140e757cfa3', class: "sd-input__content" }, index.h("slot", { key: '35d2213601e3c3508b7392096719d7841aebc6bb', name: "prefix" }), index.h("input", { key: '0148de670febb2bc02a95a3c6c4c1a6cee523626', 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: '4a8bd55a4cfd25f482b1fcabb84f8ffffbbc8072', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: '5c11a19971dceba378a4ea77f3f40d7b3d928214', icon: "close", ariaLabel: "clear", 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: '63dbd526a1a9e67bd41483211bf9a005dc0dc93f', 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: '92cb57b65e70a499c48e73f028e30715f1b1356c', 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;
@@ -172,44 +172,4 @@ const SdInput = class {
 };
 SdInput.style = sdInputCss();
 
-const sdSelectSearchInputCss = () => `sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center}sd-select-search-input .sd-select-search-input{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}sd-select-search-input .sd-select-search-input sd-input{width:100%}sd-select-search-input .sd-select-search-input--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}`;
-
-const SdSelectSearchInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.searchInput = index.createEvent(this, "sdSearchInput", 7);
-        this.searchFocus = index.createEvent(this, "sdSearchFocus", 7);
-    }
-    isScrolled = false;
-    searchText = '';
-    searchInput;
-    searchFocus;
-    searchRef;
-    async sdGetNativeElement() {
-        if (this.searchRef) {
-            return this.searchRef.sdGetNativeElement();
-        }
-        return null;
-    }
-    async sdSearchInputFocus() {
-        const input = await this.sdGetNativeElement();
-        input?.focus({ preventScroll: true });
-    }
-    render() {
-        return (index.h("div", { key: 'f056d50b2a0ca1e40efabaae5071d56259d2094b', class: {
-                'sd-select-search-input': true,
-                'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: '14a59374d1c7d661247ea506b4f5670893f16294', 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: 'd7e976a06b6a889a1be2b79252f1d57729953522', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
-    }
-};
-SdSelectSearchInput.style = sdSelectSearchInputCss();
-
 exports.sd_input = SdInput;
-exports.sd_select_search_input = SdSelectSearchInput;

package/dist/cjs/sd-linear-progress.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
-var system = require('./system-BbCUNhDJ.js');
+var system = require('./system-DRemSdU1.js');
 
 const LINEAR_PROGRESS_COLORS = {
     track: component_progress.progressTokens.progress.color.track,
@@ -49,7 +49,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: '7a639f88907718e71692f08beaa4ff32a913990c', style: hostStyle }, index.h("div", { key: '0e9dc34a18d5497c67ce890e9976d98ff46a7cae', class: 'sd-linear-progress__track' }, index.h("div", { key: 'b06985fa70196b47046907bbf72f73518e731614', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'b7ca66daa73439d52243f21991131dd40704c018', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: 'c2a8886d6e8402c29607287ae3a1c489138b38ce', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: '36024d7cfbe5c932821744fa30f6366bf7a75302', class: 'sd-linear-progress__label' }, this.label)));
+        return (index.h(index.Host, { key: 'c7f2324ff98e1ec6e0d1d6c7a3328dd383a1abab', style: hostStyle }, index.h("div", { key: 'cff100404519c4114c0dd1240715beafb91acf1f', class: 'sd-linear-progress__track' }, index.h("div", { key: '1c7fdff123778a40cd0c3f3310141ac369205352', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'ae0b515a9bb9d5561d603fa8e88c144603af8af5', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (index.h("span", { key: '5d7cdf9daccd9729729bec7bc65456b5727d4738', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'd131eeb581e33f40878b47541f662aca269a6759', class: 'sd-linear-progress__label' }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

package/dist/cjs/sd-loading-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -18,10 +18,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (index.h("div", { key: '14ae9c222f613129ac2819ee46b7dd0a248b93da', class: {
+        return (index.h("div", { key: 'a83b33262d59ecba12b7db9ed6bfe9f1fea4a54a', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: 'a84dca0f4d3582c041ee97965db92a1fff778bd4', class: "sd-loading-container__backdrop" }), index.h("div", { key: '9793e443e8371a30572ca9b185e0bcfb09d2d1e1', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '1ea2e88043ece1b7c6ff9fe210d7d765d738bbfa', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '20e8a1cd1205186ec419b164b9e4873eb37045ea', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '64631929afd47606df0d397747495d2a11d62932', class: "sd-loading-container__backdrop" }), index.h("div", { key: '4a304e0fb66f720b57da1e4de03fa9aa5468d5d4', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '3981cb8e994384279a812864037a8e9cec34cc35', indeterminate: true, type: "inverse" }), this.message && (index.h("p", { key: '8adec0ef2424fa3ea30a58b27efa6344ada94070', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

package/dist/cjs/sd-modal-container.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var modalStack = require('./modal-stack-DucFLON7.js');
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;

package/dist/cjs/sd-number-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var index$1 = require('./index-BUvXpPc3.js');
 
 const numberInput = {
@@ -386,12 +386,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: 'a62a0abbef4e817173d3e627d61c36523c2db81a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'd395366da25ef5ab333e4b314093a89e41519786', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'eb97c4c29165e6237064bbce54ea2031c756fe12', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '7cd260e4356d320825a75350982174446b40e15c', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (index.h("sd-field", { key: '7f4012ec048ab69f3c6b241c7fc103fd798572ca', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '975c0800b1fd6e4ab3502fc966db8917fe60bb3e', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'f2a630109b883740362dd2946ceeeaa93bbfeb36', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'dcd539c5035b1363edacadf7ed9c1096ef24714a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: 'a25c707b127f63239dbb92be5e9d569e1be58005', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '0dc0864a4434122a717041028c732aa5d370f65c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '5acf113c5e60dd5f77fb1206a60d4b5ce14e2b7f', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '5dd0f9ba9643fce07de811b2a93c8763a3d84b2c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (index.h("span", { key: 'd31337cdacceb84ee6347a2c38210ad491667d2c', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '217fcbc2b75e76adb0ed969a719e632b5eb74b27', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '48ff6d0417aadcd975a6863a0003e63ca525cdfd', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (index.h("span", { key: 'aa7e4dbb29d7e8de4e94f0411f2f4b622411a60a', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '40deeadfcfe87cb61f09ee2959b6afb5757ff56b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'b8ffcbbf663bacb7249e696d3eabf8b9ac832ddc', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }