@sellmate/design-system 1.31.0 → 1.33.0

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

@@ -0,0 +1,190 @@
+'use strict';
+
+var index = require('./index-PIjvNamO.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: 'c9edfcc75319e8ad0ec5b135c44df1285397b995', 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-PIjvNamO.js');
 
 var switchTokens = {
 	"switch": {
@@ -24,10 +24,10 @@ var switchTokens = {
 	label: {
 		typography: {
 			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",
 			textDecoration: "none",
-			lineHeight: "20"
+			lineHeight: "20",
+			fontWeight: "500"
 		}
 	},
 	gap: "6"
@@ -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: '8da2080c4831bc39b04cc66c6b2794772524dbe1', "aria-label": accessibleName, class: this.switchClasses, style: cssVars }, index.h("input", { key: '54d784547ac811f323aa13e69813f41ef313c76d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.leftLabel && index.h("span", { key: 'bf4912d9c441f471a6eb96d277facb82d9ee62a3', class: "sd-switch__label" }, this.leftLabel), index.h("div", { key: 'c3a80ed0d787eb354812128c4348e6f65d727e4f', class: "sd-switch__track" }, index.h("div", { key: 'e4e56aa002ea7a010471bdf745f197f1a8486e2b', class: "sd-switch__knob" })), right && index.h("span", { key: '9e5734ea2767508a6c2172f9c3cb515693288e23', 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-PIjvNamO.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: '814a74aa2e17e22e2c8ea8fbd22be4505940e2b0', 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-PIjvNamO.js');
 
 const textLink = {
 	sm: {
@@ -173,7 +173,7 @@ const SdTextLink = class {
         };
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (index.h("span", { key: '363829c6d53fc3df03dee7ddd290ca078c255039', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (index.h("span", { key: '93860b9f84f8234a39b47ce75c9f9a3d4ac0088a', role: "button", tabindex: this.disabled ? -1 : 0, class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
             }, style: cssVars, onClick: this.handleClick, onKeyDown: e => {
@@ -181,13 +181,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (index.h("sd-portal", { key: '4dcb8ca39f7b9627b5f77885c0823848d0aa5a5f', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, index.h("div", { key: '7bbcabbd9d9bb3594d8c4817dbbb922018bbbd19', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: '313c23dc9caf81d885ebf288c475ebe01bd24515', name: "square_xs_grey", label: tooltipText })))), this.icon && (index.h("sd-icon", { key: '2668c579bc22547b542ca2045f9af0fad25a5ee7', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '28246109bab90175498e841ecb02ac4a53a992b8', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: 'c157788957cbba17a1411ebb329897fc6524171d', class: "sd-text-link__arrow", style: {
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (index.h("sd-portal", { key: '13fb262c32c6d915ed1e8b18bde36583ab474cf9', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, index.h("div", { key: '6b142c5005d96de09c28a85787277e11d9d97166', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, index.h("sd-tag", { key: '488b146e3bb668b8ae0e806f33ec4fbd59015b06', name: "square_xs_grey", label: tooltipText })))), this.icon && (index.h("sd-icon", { key: '95d09755d74b541b93d76f87889b28a9e1cf06d5', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'db7e9655587951dcb9f614dd8e8b49a7a2a9de2c', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (index.h("span", { key: '5b97b910f0e5e650712a1b3ee4c1bcdf701049eb', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: 'b74ca3398a1dd74ac5a9f7a16c872d313882fd4d', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: 'b4407d744efb69994b18f7eaa61bd69be6773f82', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var index = require('./index-PIjvNamO.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 const sdTimePickerSelectorCss = () => `sd-time-picker-selector{display:block}sd-time-picker-selector .sd-time-picker-selector{display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;background:var(--selector-bg);border-radius:var(--selector-radius);box-shadow:4px 8px 16px -4px rgba(34, 34, 34, 0.1), 0 0 24px -6px rgba(34, 34, 34, 0.12)}sd-time-picker-selector .sd-time-picker-selector__meridiem{display:flex;align-items:center;justify-content:center;padding:var(--selector-section-padding-y) var(--selector-section-padding-x);background:var(--selector-bg)}sd-time-picker-selector .sd-time-picker-selector__meridiem-group{display:flex;isolation:isolate}sd-time-picker-selector .sd-time-picker-selector__meridiem-button{width:61px;height:28px;border:1px solid #ccc;background:#fff;color:#555;font-size:12px;line-height:20px;font-weight:500;cursor:pointer}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--first{border-radius:4px 0 0 4px;margin-right:-1px}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--end{border-radius:0 4px 4px 0}sd-time-picker-selector .sd-time-picker-selector__meridiem-button--selected{z-index:1;border-color:#0075ff;color:#0075ff}sd-time-picker-selector .sd-time-picker-selector__divider{height:1px;width:100%;background:#e1e1e1}sd-time-picker-selector .sd-time-picker-selector__time{display:flex;align-items:center;justify-content:center;gap:var(--selector-time-gap);padding:var(--selector-section-padding-y) var(--selector-section-padding-x);background:var(--selector-bg)}sd-time-picker-selector .sd-time-picker-selector__column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-time-column-gap)}sd-time-picker-selector .sd-time-picker-selector__input{width:var(--selector-input-width);height:28px;box-sizing:border-box;border:1px solid #aaa;border-radius:4px;background:#fff;color:#222;font-size:12px;line-height:20px;text-align:center;outline:none}sd-time-picker-selector .sd-time-picker-selector__colon{width:var(--selector-colon-size);color:#555;font-size:16px;line-height:16px;text-align:center}`;
 
@@ -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: '690a2ee3a338498102444cd3ffb2442e84d1e5c5', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (index.h("div", { key: '29acf35f8b8081f074dd081762e798247da1ca0b', class: "sd-time-picker-selector__meridiem" }, index.h("div", { key: 'b115a20d0214e1180c17c59f3a8aad3b3d730466', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && index.h("div", { key: '2a3c9f4b16521af48544fb430a2572b066a20647', class: "sd-time-picker-selector__divider" }), index.h("div", { key: '46e80292e25405564861cd75fdfc661fba93a5b1', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), index.h("span", { key: '48629faacd39b228deb0b29647500d3c5667d941', 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,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var index = require('./index-PIjvNamO.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 const sdTimePickerTriggerCss = () => `sd-time-picker-trigger{display:block;width:100%;height:100%}sd-time-picker-trigger .sd-time-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-time-picker-trigger .sd-time-picker-trigger--disabled{cursor:not-allowed}sd-time-picker-trigger .sd-time-picker-trigger__icon,sd-time-picker-trigger .sd-time-picker-trigger__clear{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-time-picker-trigger .sd-time-picker-trigger__text{flex:1;min-width:var(--trigger-text-min-width, 80px);font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
 
@@ -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: '3671871d1abb524d7e76eaf0e902a1081d340ebb', 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: 'a522d81a6af432b758a16f785ca8b96110589ae6', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), index.h("span", { key: '3c4f96441cb01e9e94ae4e5294fb032e160bcde9', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (index.h("sd-ghost-button", { key: '7133f68a7c73e12e4aaa1f49652c06836ed2d465', 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,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 const sdTimePickerCss = () => `sd-time-picker{display:inline-flex}sd-time-picker sd-portal{display:none}sd-time-picker .sd-time-picker{position:relative;min-width:var(--sd-time-picker-min-width);width:100%;height:100%}`;
 
@@ -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: '4891d77f0e98a9028fff6fcf720144f6d84e527e', 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: '86f2c4975ffb9ce8e9644e0e70fc9386266d6d71', 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: '6df1aa71c8f94ca5191e61c79125c90ff56124d9', 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: 'ffe406dc3b6e076fea9890ae1433bf11e2a9ca3e', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-picker-selector", { key: '523d6e6bb0fb8abf830d29086c7b2e48cbb5bdc9', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, onSdUpdate: this.handleSelect })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/{sd-time-picker.config-C7REB08L.js → sd-time-picker.config-BR3hVQiH.js}

@@ -1,13 +1,26 @@
 'use strict';
 
-var component_field = require('./component.field-C7it8cZm.js');
+var component_field = require('./component.field-TjxaMQMn.js');
 
 const timepicker = {
+	sm: {
+		height: "28",
+		paddingX: "12",
+		gap: "8",
+		icon: "16",
+		radius: "4"
+	},
+	md: {
+		height: "36",
+		paddingX: "16",
+		gap: "12",
+		icon: "20",
+		radius: "6"
+	},
 	border: {
+		width: "1",
 		"default": "#AAAAAA",
-		focus: "#0075FF",
-		width: "1"
-	},
+		focus: "#0075FF"},
 	bg: {
 		"default": "#FFFFFF",
 		disabled: "#E1E1E1"
@@ -22,17 +35,6 @@ const timepicker = {
 	},
 	selector: {
 		bg: "#FFFFFF",
-		range: {
-			heading: {
-				color: "#555555",
-				gap: "16"
-			},
-			paddingXY: "24",
-			panelGap: "24",
-			section: {
-				gap: "12"
-			}
-		},
 		radius: "8",
 		section: {
 			paddingX: "16",
@@ -49,21 +51,18 @@ const timepicker = {
 		},
 		colon: {
 			size: "16"
+		},
+		range: {
+			paddingXY: "24",
+			panelGap: "24",
+			heading: {
+				color: "#555555",
+				gap: "16"
+			},
+			section: {
+				gap: "12"
+			}
 		}
-	},
-	sm: {
-		height: "28",
-		paddingX: "12",
-		gap: "8",
-		icon: "16",
-		radius: "4"
-	},
-	md: {
-		height: "36",
-		paddingX: "16",
-		gap: "12",
-		icon: "20",
-		radius: "6"
 	}
 };
 var timepickerTokens = {

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var index = require('./index-PIjvNamO.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 const sdTimeRangePickerSelectorCss = () => `sd-time-range-picker-selector{display:block}sd-time-range-picker-selector .sd-time-range-picker-selector{display:flex;align-items:flex-start;justify-content:center;gap:var(--selector-range-panel-gap);padding:var(--selector-range-padding);overflow:hidden;background:var(--selector-bg);border-radius:var(--selector-radius);box-shadow:var(--sd-system-shadow-spread-sm-x) var(--sd-system-shadow-spread-sm-y) var(--sd-system-shadow-spread-sm-blur) var(--sd-system-shadow-spread-sm-spread) var(--sd-system-shadow-spread-sm-color), var(--sd-system-shadow-spread-md-x) var(--sd-system-shadow-spread-md-y) var(--sd-system-shadow-spread-md-blur) var(--sd-system-shadow-spread-md-spread) var(--sd-system-shadow-spread-md-color)}sd-time-range-picker-selector .sd-time-range-picker-selector__panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-range-section-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__heading{display:flex;flex-direction:column;align-items:center;gap:var(--selector-range-heading-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__heading-text{color:var(--selector-range-heading-color);font-size:12px;line-height:20px;font-weight:700;text-align:center;white-space:nowrap}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-group{display:flex;isolation:isolate}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button{width:61px;height:28px;border:var(--selector-border-width) solid var(--selector-border-default);background:var(--selector-bg);color:var(--selector-range-heading-color);font-size:12px;line-height:20px;font-weight:500;cursor:pointer}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--first{border-radius:4px 0 0 4px;margin-right:-1px}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--end{border-radius:0 4px 4px 0}sd-time-range-picker-selector .sd-time-range-picker-selector__meridiem-button--selected{z-index:1;border-color:var(--selector-border-focus);color:var(--selector-border-focus)}sd-time-range-picker-selector .sd-time-range-picker-selector__divider{align-self:stretch;width:1px;background:var(--selector-bg-disabled)}sd-time-range-picker-selector .sd-time-range-picker-selector__time{display:flex;align-items:center;justify-content:center;gap:var(--selector-time-gap);padding:0 16px;background:var(--selector-bg)}sd-time-range-picker-selector .sd-time-range-picker-selector__column{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--selector-time-column-gap)}sd-time-range-picker-selector .sd-time-range-picker-selector__input{width:var(--selector-input-width);height:28px;box-sizing:border-box;border:var(--selector-border-width) solid var(--selector-border-default);border-radius:4px;background:var(--selector-bg);color:var(--selector-text-default);font-size:12px;line-height:20px;text-align:center;outline:none}sd-time-range-picker-selector .sd-time-range-picker-selector__colon{width:var(--selector-colon-size);color:var(--selector-range-heading-color);font-size:16px;line-height:16px;text-align:center}`;
 
@@ -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: 'eceb5c9016499ae57fe40ec65a9c0066ba6509b1', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), index.h("div", { key: 'ce5d81d905de10a507fa3dfeda1c98ebbaace906', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
     }
 };
 SdTimeRangePickerSelector.style = sdTimeRangePickerSelectorCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var sdTimePicker_config = require('./sd-time-picker.config-C7REB08L.js');
-require('./component.field-C7it8cZm.js');
+var sdTimePicker_config = require('./sd-time-picker.config-BR3hVQiH.js');
+require('./component.field-TjxaMQMn.js');
 
 function getTimeMinutes(value) {
     const { hour, minute } = sdTimePicker_config.parseTimeValue(value);
@@ -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: '4259e2257aa9edccd9c567f57ec18837fa831281', 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: 'e1412d82e5eae70bbdb140f6bf06c0867f75c35c', 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: '719492ec16aaba4a05cf97348c6c9179238b6b09', 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: '13ddc4c3a22661bdc170d47a533e36ada9c431c6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-time-range-picker-selector", { key: 'e5423e09b2c7282b8c59cfac2ebd9de9c7a3d091', 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-PIjvNamO.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: '7a69bd0ea72cfb94e4e78287f6d6a0ea1a1a60a9', 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-PIjvNamO.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: 'c9e3741a53f59d37f2b384379aa6adef9cf3bb4b', 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: '6340355a0ffa73765040930cca2e742427d796e2', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '2b2b03b9e7d46a71f7178b4e45f0fe3b383abc49', class: "sd-toast__icon" }, index.h("sd-icon", { key: '641a3f15b31009e81d590ca8dc7318c55c773e22', name: this.icon, size: iconSize, color: iconColor }))), index.h("div", { key: 'ec6396936145b1fb7e1071221de0d67a3415ab77', class: "sd-toast__content" }, index.h("span", { key: '0cc6791d14db783003c1aaefaa32757f39a7f043', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '19989545eb1f2d6f984565314de3da581ef666e4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '3ca5c3b9d77a04c2c4d70a48641c51053794bd33', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (index.h("sd-ghost-button", { key: 'd5daf926f8a23f9d6bbec06cc560afc6c89aa064', 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-PIjvNamO.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: 'f1e459f54be93de764c504b9719db5f4754c07d9', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: 'b0ab7d28248db1286eaf4da5d93adc1fc93a155c', 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-BUV7X2B8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Jr8OU0y9.js');
+var index = require('./index-PIjvNamO.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/cjs/{useDatePicker-j06ymWZ_.js → useDatePicker-D4fa6SZx.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var sdDatePicker_config = require('./sd-date-picker.config-CgyNxY03.js');
+var sdDatePicker_config = require('./sd-date-picker.config-CvdiwEii.js');
 
 const CALENDAR_LAYOUT = {
     bg: sdDatePicker_config.datepickerTokens.datepicker.calendar.bg,

package/dist/collection/collection-manifest.json

@@ -29,6 +29,7 @@
     "components/sd-field/sd-field.js",
     "components/sd-divider/sd-divider.js",
     "components/sd-dropdown-button/sd-dropdown-button.js",
+    "components/sd-expansion-item/sd-expansion-item.js",
     "components/sd-file-picker/sd-file-picker.js",
     "components/sd-floating-portal/sd-floating-portal.js",
     "components/sd-input/sd-input.js",
@@ -42,11 +43,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",