@sellmate/design-system 1.31.0 → 1.32.0

package/dist/cjs/sd-select-list-item_4.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 var component_listItem = require('./component.listItem-cAO_ppOz.js');
 var component_listBox = require('./component.listBox-MHAv4Yy7.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
@@ -213,7 +213,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        index.h("div", { key: '4fff470052d5d02cddf204f33df24247e087a55d', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        index.h("div", { key: 'e4f8fc195a7231cd3218b91a26c77f51df14e6dc', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -223,7 +223,7 @@ const SdSelectListItem = class {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: '45649f31743eac574560399b07c9ba94d7185013', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '2e2c1dca85ed4be38cf8435df86f8ea4b7273673', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (index.h("sd-checkbox", { key: 'a9720067837860a8259b1a16b5eab111f02c7ac4', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (index.h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.option.label)) })) : (index.h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (index.h("span", { key: '8ece77c44bea9aea99883efe099137bca7d89475', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -280,20 +280,20 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (index.h("div", { key: '3231c0ea91e678a71cac6a1c5805fa255a96deb2', class: {
+        return (index.h("div", { key: '5e1dc595bd89df5364d9a302dc917abb29fa2c7b', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, index.h("div", { key: 'f25df864ea6bbe2db7c0ca8e1abc0645f11b12f3', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '494d5b964543e3a595629c02ef7b61b492d26eed', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '475b925b7987d98fb0a46d6b63a0a9edd2db00ae', ref: el => {
+            } }, index.h("div", { key: 'd07b293bf685652dcc965071f47c0492776f9d41', class: "sd-select-list-item-search__inner" }, index.h("sd-icon", { key: '065e1df3105048322ababd7237df83d045543fc3', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), index.h("input", { key: '973977bfbd98f5430b1b53f1ad59128383481197', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '26fa161589df77bea51e4568bfd2d501008a0846', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), index.h("button", { key: '2a1386ef266f7398f97ff99adc89ee3cec4a594e', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: 'aca5037c9dbc171f201cc02e7a2d00f49e6e6397', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, index.h("sd-icon", { key: '1060c9fe4e3e6ce239800f04b382df9ce83e9d16', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();
 
-const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{opacity:0;width:8px;background:#E5E5E5}:host .sd-select-listbox__list::-webkit-scrollbar:horizontal{height:8px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}:host .sd-select-listbox__list::-webkit-scrollbar-track{background-color:#E5E5E5}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
+const sdSelectListboxCss = () => `:host{display:block}:host .sd-select-listbox{display:flex;flex-direction:column;width:var(--listbox-trigger-width);max-width:var(--listbox-max-width);max-height:var(--listbox-max-height);border-radius:var(--listbox-radius);background:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);overflow:hidden;outline:none}:host .sd-select-listbox__list{flex:1;min-height:0;overflow-y:auto;padding-bottom:0}:host .sd-select-listbox__list::-webkit-scrollbar{width:12px;height:12px;background:transparent}:host .sd-select-listbox__list::-webkit-scrollbar-track{background:transparent}:host .sd-select-listbox__list::-webkit-scrollbar-thumb{background-color:#CCCCCC;border:2px solid transparent;border-radius:8px;background-clip:padding-box}@supports not selector(::-webkit-scrollbar){:host .sd-select-listbox__list{scrollbar-width:thin;scrollbar-color:#CCCCCC transparent}}:host .sd-select-listbox__list::-webkit-scrollbar,:host .sd-select-listbox__list::-webkit-scrollbar-track{background:#F6F6F6}@supports not selector(::-webkit-scrollbar){:host .sd-select-listbox__list{scrollbar-color:#CCCCCC #F6F6F6}}:host .sd-select-listbox__list::-webkit-scrollbar-track:vertical{border-left:1px solid #E1E1E1}:host .sd-select-listbox__list::-webkit-scrollbar-track:horizontal{border-top:1px solid #E1E1E1}:host .sd-select-listbox__list::-webkit-scrollbar-thumb:vertical{border-left-width:3px}:host .sd-select-listbox__list::-webkit-scrollbar-thumb:horizontal{border-top-width:3px}:host .sd-select-listbox__empty{padding:12px;text-align:center;font-size:12px;line-height:20px;color:#888888}`;
 
 const SdSelectListbox = class {
     constructor(hostRef) {
@@ -660,9 +660,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (index.h("div", { key: '1686c9749284be82edcf4eaf9c4741e1be3920d4', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '934e1bf38324bda71e0c4c956fd8ad82eb9c4f46', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '33ec8b142a0f60b329fcd58bc8952d3577c92f83', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (index.h("div", { key: '060d455fa7eb31d50fb13251f352643460cc1232', class: "sd-select-listbox", style: cssVars }, this.showSearch && (index.h("sd-select-list-item-search", { key: '70543defd307911c3885b9ef3a0726465e9e4471', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), index.h("div", { key: '17aed7b1eb402f3b61044814cfad734e2cd4b922', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '46d1f11884ed2fa9a55144fbf0633cb78f2f8ec3', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (index.h("sd-select-list-item", { key: '1f43ef353e470ebb0f70bfed5c495eb7de227c62', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (index.h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (index.h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -730,7 +730,7 @@ const SdSelectTrigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (index.h("div", { key: '3e5b42da3a391f52f597594ccf9ebf9e9b236ccc', ref: el => {
+        return (index.h("div", { key: 'afda44bd2f8dcf0ab75d75b0178b067f96e61707', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -741,7 +741,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '56938d493425d54b2c69840014b0354674fcf9d6', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '90e7df2f8bd416ccd1545c78c79f02746c119db3', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("div", { key: '061acc7d557d222b2616538346d415a6f37a198e', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (index.h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml.sanitizeInlineHtml(this.displayText)) })) : (index.h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), index.h("sd-icon", { key: '6444177838d54360776bbbfa7f08da7a6f556a16', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -0,0 +1,190 @@
+'use strict';
+
+var index = require('./index-Cg7X15Hq.js');
+
+const stepper$1 = {
+	sm: {
+		sequence: {
+			size: "20"
+		},
+		typography: {
+			active: {
+				fontWeight: "700"},
+			"default": {
+				fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+				fontWeight: "500",
+				fontSize: "12",
+				lineHeight: "20"}
+		}
+	},
+	dash: {
+		width: "20",
+		color: "#888888"
+	},
+	lg: {
+		sequence: {
+			size: "24"
+		},
+		typography: {
+			active: {
+				fontWeight: "700"},
+			"default": {
+				fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+				fontWeight: "500",
+				fontSize: "14",
+				lineHeight: "24"}
+		}
+	},
+	container: {
+		gap: "12"
+	},
+	item: {
+		gap: "8"
+	},
+	sequence: {
+		radius: "9999",
+		border: {
+			active: "#93C4FF",
+			"default": "#E1E1E1",
+			completed: "#CCCCCC",
+			witdh: "1"
+		},
+		icon: "12",
+		bg: {
+			active: "#D9EAFF",
+			"default": "#FFFFFF",
+			completed: "#E1E1E1"
+		},
+		text: {
+			active: "#0075FF",
+			"default": "#AAAAAA"
+		}
+	},
+	text: {
+		active: "#0075FF",
+		"default": "#888888"
+	}
+};
+var stepperTokens = {
+	stepper: stepper$1
+};
+
+const stepper = stepperTokens.stepper;
+const STEPPER_SIZES = {
+    sm: {
+        sequenceSize: stepper.sm.sequence.size,
+        fontFamily: stepper.sm.typography.default.fontFamily,
+        fontSize: stepper.sm.typography.default.fontSize,
+        lineHeight: stepper.sm.typography.default.lineHeight,
+        fontWeightActive: stepper.sm.typography.active.fontWeight,
+        fontWeightDefault: stepper.sm.typography.default.fontWeight,
+    },
+    lg: {
+        sequenceSize: stepper.lg.sequence.size,
+        fontFamily: stepper.lg.typography.default.fontFamily,
+        fontSize: stepper.lg.typography.default.fontSize,
+        lineHeight: stepper.lg.typography.default.lineHeight,
+        fontWeightActive: stepper.lg.typography.active.fontWeight,
+        fontWeightDefault: stepper.lg.typography.default.fontWeight,
+    },
+};
+const STEPPER_LAYOUT = {
+    containerGap: stepper.container.gap,
+    itemGap: stepper.item.gap,
+    dashWidth: stepper.dash.width,
+    radius: stepper.sequence.radius,
+    borderWidth: stepper.sequence.border.witdh,
+    iconSize: stepper.sequence.icon,
+};
+const STEPPER_COLORS = {
+    dash: stepper.dash.color,
+    sequenceBorder: stepper.sequence.border,
+    sequenceBg: stepper.sequence.bg,
+    sequenceText: stepper.sequence.text,
+    text: stepper.text,
+};
+
+const sdStepperCss = () => `sd-stepper{display:inline-flex}sd-stepper .sd-stepper{display:inline-flex;align-items:center;gap:var(--sd-stepper-container-gap);font-family:var(--sd-stepper-font-family);font-size:var(--sd-stepper-font-size);line-height:var(--sd-stepper-line-height)}sd-stepper .sd-stepper__item{display:inline-flex;align-items:center;gap:var(--sd-stepper-item-gap);color:var(--sd-stepper-text-default);font-weight:var(--sd-stepper-font-weight-default);white-space:nowrap}sd-stepper .sd-stepper__item--active{color:var(--sd-stepper-text-active);font-weight:var(--sd-stepper-font-weight-active)}sd-stepper .sd-stepper__sequence{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-stepper-sequence-size);height:var(--sd-stepper-sequence-size);flex:0 0 var(--sd-stepper-sequence-size);border-radius:var(--sd-stepper-sequence-radius);border:var(--sd-stepper-sequence-border-width) solid var(--sd-stepper-sequence-border);background:var(--sd-stepper-sequence-bg);color:var(--sd-stepper-sequence-text);font-size:12px;line-height:20px;font-weight:700}sd-stepper .sd-stepper__label{color:inherit}sd-stepper .sd-stepper__dash{display:inline-flex;align-items:center;width:var(--sd-stepper-dash-width);height:1px;flex:0 0 var(--sd-stepper-dash-width);color:var(--sd-stepper-dash-color)}`;
+
+const SdStepper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** 단계 목록 */
+    items = [];
+    /** 현재 활성 단계 value */
+    value = '';
+    /** 크기 */
+    size = 'sm';
+    /** 접근성 레이블 */
+    ariaLabel = '진행 단계';
+    valueChanged(newValue) {
+        this.value = newValue;
+    }
+    getItemValue(item, index) {
+        return item.value ?? String(index + 1);
+    }
+    getActiveIndex() {
+        const found = this.items.findIndex((item, index) => this.getItemValue(item, index) === this.value);
+        return found >= 0 ? found : 0;
+    }
+    getState(index) {
+        const activeIndex = this.getActiveIndex();
+        if (index < activeIndex)
+            return 'completed';
+        if (index === activeIndex)
+            return 'active';
+        return 'default';
+    }
+    buildCssVars() {
+        const size = STEPPER_SIZES[this.size];
+        return {
+            '--sd-stepper-sequence-size': `${size.sequenceSize}px`,
+            '--sd-stepper-font-family': size.fontFamily,
+            '--sd-stepper-font-size': `${size.fontSize}px`,
+            '--sd-stepper-line-height': `${size.lineHeight}px`,
+            '--sd-stepper-font-weight-active': size.fontWeightActive,
+            '--sd-stepper-font-weight-default': size.fontWeightDefault,
+            '--sd-stepper-container-gap': `${STEPPER_LAYOUT.containerGap}px`,
+            '--sd-stepper-item-gap': `${STEPPER_LAYOUT.itemGap}px`,
+            '--sd-stepper-dash-width': `${STEPPER_LAYOUT.dashWidth}px`,
+            '--sd-stepper-dash-color': STEPPER_COLORS.dash,
+            '--sd-stepper-sequence-radius': `${STEPPER_LAYOUT.radius}px`,
+            '--sd-stepper-sequence-border-width': `${STEPPER_LAYOUT.borderWidth}px`,
+        };
+    }
+    getStateVars(state) {
+        return {
+            '--sd-stepper-sequence-border': STEPPER_COLORS.sequenceBorder[state],
+            '--sd-stepper-sequence-bg': STEPPER_COLORS.sequenceBg[state],
+            '--sd-stepper-sequence-text': state === 'completed'
+                ? STEPPER_COLORS.text.default
+                : STEPPER_COLORS.sequenceText[state],
+            '--sd-stepper-text-active': STEPPER_COLORS.text.active,
+            '--sd-stepper-text-default': STEPPER_COLORS.text.default,
+        };
+    }
+    render() {
+        return (index.h("div", { key: '0255899ce447c38d44a618acc72692d2c746ebc3', class: "sd-stepper", role: "list", "aria-label": this.ariaLabel, style: this.buildCssVars() }, this.items.map((item, index$1) => {
+            const state = this.getState(index$1);
+            const className = [
+                'sd-stepper__item',
+                `sd-stepper__item--${state}`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            return [
+                index.h("span", { class: className, role: "listitem", "aria-current": state === 'active' ? 'step' : undefined, style: this.getStateVars(state) }, index.h("span", { class: "sd-stepper__sequence", "aria-hidden": "true" }, state === 'completed' ? (index.h("sd-icon", { name: "check", size: STEPPER_LAYOUT.iconSize, color: "currentColor" })) : (index$1 + 1)), index.h("span", { class: "sd-stepper__label" }, item.label)),
+                index$1 < this.items.length - 1 && (index.h("span", { class: "sd-stepper__dash", "aria-hidden": "true" }, index.h("svg", { width: STEPPER_LAYOUT.dashWidth, height: "1", viewBox: `0 0 ${STEPPER_LAYOUT.dashWidth} 1`, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { width: "1.6", height: "1", fill: "#888888" }), index.h("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }), index.h("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }), index.h("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })))),
+            ];
+        })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdStepper.style = sdStepperCss();
+
+exports.sd_stepper = SdStepper;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 
 var switchTokens = {
 	"switch": {
@@ -119,7 +119,7 @@ const SdSwitch = class {
         // label(deprecated)은 rightLabel 로 흡수 (하위호환)
         const right = this.rightLabel ?? this.label;
         const accessibleName = [this.leftLabel, right].filter(Boolean).join(' ') || 'switch';
-        return (index.h("label", { key: '617ec652e8878aa41abd2d376479730e4db69025', "aria-label": accessibleName, class: this.switchClasses, style: cssVars }, index.h("input", { key: 'd765a1b3038d2decec2bf561d96a201cb617b40d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.leftLabel && index.h("span", { key: '2c6e398e7f926d3d9d9049aa1aa3fe459b92f51e', class: "sd-switch__label" }, this.leftLabel), index.h("div", { key: 'c71fdd196c0d50ce499c4c524005d01b834d066a', class: "sd-switch__track" }, index.h("div", { key: 'eabac4c3305fabf2e857fc8066a9acb80f90bf31', class: "sd-switch__knob" })), right && index.h("span", { key: '41a0f8ffd56791138b605379f88545b6e20d8df3', class: "sd-switch__label" }, right)));
+        return (index.h("label", { key: '3ff528a7fe1a39cae2475d31af98036dd5f0c7d8', "aria-label": accessibleName, class: this.switchClasses, style: cssVars }, index.h("input", { key: '02e54ab9b626be19ff1efd330069e3f9477367c6', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.leftLabel && index.h("span", { key: '2eed006c7de45f1cda9d009fa4228c8cb1f56755', class: "sd-switch__label" }, this.leftLabel), index.h("div", { key: '031c7c3121c54a45b7de0187c31e2e298a0f9701', class: "sd-switch__track" }, index.h("div", { key: '15a3225b7dd4deab98feb4f6581d89f9cf480edd', class: "sd-switch__knob" })), right && index.h("span", { key: '04b2185de5b5d2c05f24b3818c6dbc1300680d13', class: "sd-switch__label" }, right)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 
 const tab = {
 	main: {
@@ -207,7 +207,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (index.h("div", { key: 'd8d86075bbf5e13444f99e57cf63c2f5b9ef28fc', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
+        return (index.h("div", { key: 'c88c2d10181fd02076ac9c0ecdb6d3e95bd727c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index$1) => {
             const badgeName = this.getBadgeName(tab);
             return (index.h("div", { key: `tab-${index$1}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 
 const textLink = {
 	sm: {

package/dist/cjs/sd-time-picker-selector.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
 require('./component.field-C7it8cZm.js');
 
@@ -166,7 +166,7 @@ const SdTimePickerSelector = class {
             '--selector-input-width': `${sdTimePicker_config.TIMEPICKER_SELECTOR.inputWidth}px`,
             '--selector-colon-size': `${sdTimePicker_config.TIMEPICKER_SELECTOR.colonSize}px`,
         };
-        return (index.h("div", { key: '230eba90099f06b238a49da38bade09d5a1a168a', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (index.h("div", { key: 'a15baa49aa07b469843f15a1c381c97df6b31600', class: "sd-time-picker-selector__meridiem" }, index.h("div", { key: 'e1e9576461c4c9059b1d5c9f4a8528af91869316', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && index.h("div", { key: 'c9c8dfbb3c724bef2d20d22ea839079c8176c1c6', class: "sd-time-picker-selector__divider" }), index.h("div", { key: 'd7157d6f5a38b09098fea6dc33d9ca69cf9fcd06', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), index.h("span", { key: '83b0ce7966cabe292eb454d103507a0504915aa7', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
+        return (index.h("div", { key: '9bf6683c63cf784bba552872b00b53a19e7bd77d', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (index.h("div", { key: '096e30217c77ab8faf305965528f97026eefee85', class: "sd-time-picker-selector__meridiem" }, index.h("div", { key: '4931f8e17bfb1cb356e1d713dfdf1635ced0429a', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && index.h("div", { key: 'a69fcd7379092069faaa556e7dc6649c46072314', class: "sd-time-picker-selector__divider" }), index.h("div", { key: '620e20c888b254533c34d626eac5012456b76052', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), index.h("span", { key: '483fc0afbbaf8faae65012bcead48a04bce6b446', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-time-picker-trigger.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
 require('./component.field-C7it8cZm.js');
 
@@ -59,7 +59,7 @@ const SdTimePickerTrigger = class {
                 ? sdTimePicker_config.TIMEPICKER_COLORS.icon.disabled
                 : sdTimePicker_config.TIMEPICKER_COLORS.icon.default,
         };
-        return (index.h("div", { key: '6b6bff8d9928ace4cda84a7bdb2ac6f73f0d2329', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("div", { key: '4cd9086e21a7e7fedb6601c163dcf9c5c8f374d1', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-time-picker-trigger': true,
                 'sd-time-picker-trigger--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -67,7 +67,7 @@ const SdTimePickerTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, index.h("sd-icon", { key: 'd371bf5acec8592a44c0d18e738b5ac71b556f32', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), index.h("span", { key: '2bc0ddfef47a1e929ceafb723345e1ae9e62095b', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (index.h("sd-ghost-button", { key: '76763c65dd6ee64c8f1abc0c871d8c50cfaf3852', class: "sd-time-picker-trigger__clear", icon: "close", size: "xs", ariaLabel: "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30", onSdClick: this.handleClear }))));
+            } }, index.h("sd-icon", { key: 'c38c13b3dc8c072430bb5b40765b96582696e04c', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), index.h("span", { key: '245e636a0645d97c825a44607516d8821cc533f9', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (index.h("sd-ghost-button", { key: 'fa740470bf8b798fcf0863ba9e7822e496e8e841', class: "sd-time-picker-trigger__clear", icon: "close", size: "xs", ariaLabel: "\uC2DC\uAC04 \uC9C0\uC6B0\uAE30", onSdClick: this.handleClear }))));
     }
 };
 SdTimePickerTrigger.style = sdTimePickerTriggerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
 require('./component.field-C7it8cZm.js');
@@ -155,9 +155,9 @@ const SdTimePicker = class {
             '--sd-system-color-field-border-focus': sdTimePicker_config.TIMEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdTimePicker_config.TIMEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: 'dc433d8d452ad71bc5ea1b388399df862ca9cd04', 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, status: this.status, 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: '258c3a0d3232e8edfe5304dd2e0fcea4060f5893', class: "sd-time-picker", ref: el => {
+        return (index.h("sd-field", { key: '77b2d4c36e19481ccb6a3d0cef288fe9eb902330', 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, status: this.status, 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: '2d25872f4d1253faf85384030de21ef283e0696d', class: "sd-time-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-time-picker-trigger", { key: '22af4e81d925cbdacea4e08b05aaa13cf5eb9ef8', displayText: sdTimePicker_config.formatTimeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default'), placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '8c7e43950257c8a8bf3b157f69985b3284430107', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-picker-selector", { key: '27109beda36d1817807f6a8b6af8a7a12b4c31c6', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, onSdUpdate: this.handleSelect })))));
+            } }, index.h("sd-time-picker-trigger", { key: 'fe4a4611216642bcee5632c2202dec0058cc6898', displayText: sdTimePicker_config.formatTimeDisplay(this.value, this.effectiveUseMeridiem ? 'midday' : 'default'), placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'd2f921b2eee8d3cc33c52c6eb06f24188f18a78a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-picker-selector", { key: 'd53c348ef16a1ddac731a49d0aafe64931007d32', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, onSdUpdate: this.handleSelect })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/sd-time-range-picker-selector.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
 require('./component.field-C7it8cZm.js');
 
@@ -211,7 +211,7 @@ const SdTimeRangePickerSelector = class {
             '--selector-bg-disabled': sdTimePicker_config.TIMEPICKER_COLORS.bg.disabled,
             '--selector-text-default': sdTimePicker_config.TIMEPICKER_COLORS.text.default,
         };
-        return (index.h("div", { key: '2cfcf8240579a3526c40c430e1704c8b10556add', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), index.h("div", { key: 'c48b1c6af7897a64339ce9c1c1da9d8e4a02c612', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
+        return (index.h("div", { key: 'd62a959d611bd9379c0f07cd29cea18cda66b1f6', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), index.h("div", { key: '23e668d0bae4a16fdc8af3be4a2c40bec2d7f1cd', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
     }
 };
 SdTimeRangePickerSelector.style = sdTimeRangePickerSelectorCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
 require('./component.field-C7it8cZm.js');
@@ -183,9 +183,9 @@ const SdTimeRangePicker = class {
             '--sd-system-color-field-border-focus': sdTimePicker_config.TIMEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdTimePicker_config.TIMEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: '41f3bdb3d08a72f590a25486975962d02cb7bbb8', 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, status: this.status, 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: 'b3b8e08bd44e3f96a733c7341b8ca66c343aaa9d', class: "sd-time-range-picker", ref: el => {
+        return (index.h("sd-field", { key: 'b709c0fe129ab899b60aa75e41bc949cb82184d7', 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, status: this.status, 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: '7fffb9bb91a0fa8a8fdce7704c47aea2de0b509a', class: "sd-time-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-time-picker-trigger", { key: '39c927a8a3eee331bf253d2faabe9711c2516987', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '33fd2740d81d4dea5af75ed21888e4de213de1e3', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-range-picker-selector", { key: '554057e0b4a0fd27d570bf9ea955c947cfc5cc50', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
+            } }, index.h("sd-time-picker-trigger", { key: 'b1f42c77070fc46da93aa66e681ee9504c999d11', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, clearable: this.clearable, size: this.size, onSdTriggerClick: this.handleTriggerClick, onSdClear: this.handleClear })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'ad91d531c8326a7e977f8c576e1026c4d6d0115c', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-range-picker-selector", { key: '0df138447c01169ea3e0462d012c4917ac7f904b', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
     }
     static get watchers() { return {
         "isOpen": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -243,7 +243,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '3b7cfb69d072ae23f91b8afcced5d02f553f972b', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '166ac21503b08853631fddaed047ab108a99570a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 
 const toast = {
 	icon: "16",
@@ -93,12 +93,12 @@ const SdToast = class {
         const linkColor = typeConfig.linkColor ?? typeConfig.content;
         const useDefaultCloseIntent = ['default', 'caution', 'info'].includes(this.type);
         const buttonName = TOAST_BUTTON_NAME_BY_TYPE[this.type] ?? TOAST_BUTTON_NAME_BY_TYPE.default;
-        return (index.h("div", { key: 'f452ef18c746e75d0a2139fe14e10e2f6badc09e', style: {
+        return (index.h("div", { key: '5d7511c3fe5a5ef828986ff624af7c52ff087cfa', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, index.h("div", { key: '2f72746f674d8eb2ea60ee4d77421a08c55c519d', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '41b1f311746bfae1cc85d262ab5358b3dc63b336', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'c683d9d8a4b0712f70895c9168f1db0ed6de64f9', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: '6656f4d296ea8fb284f8eb6cca961a23a993c811', class: "sd-toast__content" }, index.h("span", { key: '17a9b19754c725a6b70e56c23f92e518e7ded0a1', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '0b6da1f070cc31d136a5e366bd8d6655d8bbc291', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '9325d2e1ec659e72858a190077c821475e5ef8f2', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'acbb5e957e6fa989412e9824bf2b4f4314afca8c', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'c35b42d7ece2030ed0e27abb0059f9b09c4edb9e', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '015223ab3e9d4296d3782afc0c6cfd60e54289c7', class: "sd-toast__icon" }, index.h("sd-icon", { key: '6d8e5d73fc026df0d8f75439b926bd027ca6a008', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'b601081818d66910d9d2f9984bfb9a473237b065', class: "sd-toast__content" }, index.h("span", { key: '6a17766f5a337cbc85179dc310fb400186f35ac6', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '80abceec8d37905073c9a8e43fcdd1a78978b5f6', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '212516f32c46938d405e68dbb156cf139b39ffd8', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: '9fd34f93f46d9a5a25ec52e0d164bbcaf4297e2e', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 
 const toggle = {
 	height: "28",
@@ -123,7 +123,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'af787ccf9ff1c49242a7f5822e8c97c5a65f2b95', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'e2584e65a77af911136766358ecdaa730b631394', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: 'f78d58c01b943a5f22ace9cb14e50b0098cc8206', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '8b8d8e09b322a5093c57129f94c49f6951d78df7', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{system-B4KkVpu2.js → system-BGCBFBcM.js}

@@ -21,7 +21,9 @@ const color = {
 	},
 	divider: {
 		"default": "#E1E1E1"
-	}};
+	},
+	border: {
+		"default": "#E1E1E1"}};
 const shadow = {
 	spread: {
 		md: {

package/dist/cjs/{tooltipArrow-BlrFItn5.js → tooltipArrow-CZff77W-.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-Cg7X15Hq.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/collection/collection-manifest.json

@@ -42,11 +42,13 @@
     "components/sd-popover/sd-popover.js",
     "components/sd-text-link/sd-text-link.js",
     "components/sd-popup/sd-popup.js",
+    "components/sd-scroll-area/sd-scroll-area.js",
     "components/sd-select/sd-select.js",
     "components/sd-select/sd-select-trigger/sd-select-trigger.js",
     "components/sd-select/sd-select-list-item/sd-select-list-item.js",
     "components/sd-select/sd-select-list-item-search/sd-select-list-item-search.js",
     "components/sd-select/sd-select-listbox/sd-select-listbox.js",
+    "components/sd-stepper/sd-stepper.js",
     "components/sd-switch/sd-switch.js",
     "components/sd-tabs/sd-tabs.js",
     "components/sd-textarea/sd-textarea.js",

package/dist/collection/components/sd-popup/sd-popup.css

@@ -40,6 +40,46 @@ sd-popup .sd-popup__body {
   min-height: 0;
   overflow: auto;
 }
+sd-popup .sd-popup__body::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background: transparent;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-thumb {
+  background-color: #CCCCCC;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background-clip: padding-box;
+}
+@supports not selector(::-webkit-scrollbar) {
+  sd-popup .sd-popup__body {
+    scrollbar-width: thin;
+    scrollbar-color: #CCCCCC transparent;
+  }
+}
+sd-popup .sd-popup__body::-webkit-scrollbar, sd-popup .sd-popup__body::-webkit-scrollbar-track {
+  background: #F6F6F6;
+}
+@supports not selector(::-webkit-scrollbar) {
+  sd-popup .sd-popup__body {
+    scrollbar-color: #CCCCCC #F6F6F6;
+  }
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-track:vertical {
+  border-left: 1px solid #E1E1E1;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-track:horizontal {
+  border-top: 1px solid #E1E1E1;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-thumb:vertical {
+  border-left-width: 3px;
+}
+sd-popup .sd-popup__body::-webkit-scrollbar-thumb:horizontal {
+  border-top-width: 3px;
+}
 sd-popup .sd-popup__footer {
   display: flex;
   align-items: center;

package/dist/collection/components/sd-scroll-area/sd-scroll-area.config.js

@@ -0,0 +1,8 @@
+import systemTokens from "../../tokens/generated/system.json";
+// background/bordered는 컨테이너가 아니라 스크롤바에만 적용된다.
+// 트랙/썸 색은 전용 토큰이 없어 스타일(scss)에서 공용 grey 스케일($grey_10/$grey_45)을 쓰고,
+// 스크롤바 구분선만 시맨틱 토큰(border.default)을 참조한다.
+export const SCROLL_AREA_AXES = ['vertical', 'horizontal', 'both'];
+export const SCROLL_AREA_COLORS = {
+    border: systemTokens.color.border.default,
+};