@sellmate/design-system 1.32.0 → 1.33.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CdvQqvIe.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-YU6oWX32.js';
 
 const textLink = {
 	sm: {
@@ -171,7 +171,7 @@ const SdTextLink = class {
         };
         const tooltipText = (this.tooltipText ?? '').trim();
         const hasTooltip = tooltipText.length > 0;
-        return (h("span", { key: '363829c6d53fc3df03dee7ddd290ca078c255039', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (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 => {
@@ -179,13 +179,13 @@ const SdTextLink = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && (h("sd-portal", { key: '4dcb8ca39f7b9627b5f77885c0823848d0aa5a5f', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, h("div", { key: '7bbcabbd9d9bb3594d8c4817dbbb922018bbbd19', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '313c23dc9caf81d885ebf288c475ebe01bd24515', name: "square_xs_grey", label: tooltipText })))), this.icon && (h("sd-icon", { key: '2668c579bc22547b542ca2045f9af0fad25a5ee7', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '28246109bab90175498e841ecb02ac4a53a992b8', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (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 && (h("sd-portal", { key: '13fb262c32c6d915ed1e8b18bde36583ab474cf9', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, h("div", { key: '6b142c5005d96de09c28a85787277e11d9d97166', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '488b146e3bb668b8ae0e806f33ec4fbd59015b06', name: "square_xs_grey", label: tooltipText })))), this.icon && (h("sd-icon", { key: '95d09755d74b541b93d76f87889b28a9e1cf06d5', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'db7e9655587951dcb9f614dd8e8b49a7a2a9de2c', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (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',
-            } }, h("sd-icon", { key: 'b74ca3398a1dd74ac5a9f7a16c872d313882fd4d', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'b4407d744efb69994b18f7eaa61bd69be6773f82', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
-import { p as parseTimeValue, c as clampTimePart, f as formatTimeValue, d as TIMEPICKER_SELECTOR } from './sd-time-picker.config-DUq29Nhs.js';
-import './component.field-DjKOoQuF.js';
+import { r as registerInstance, c as createEvent, h } from './index-YU6oWX32.js';
+import { p as parseTimeValue, c as clampTimePart, f as formatTimeValue, d as TIMEPICKER_SELECTOR } from './sd-time-picker.config-nR5BQAyT.js';
+import './component.field-B9hmJn6D.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}`;
 
@@ -164,7 +164,7 @@ const SdTimePickerSelector = class {
             '--selector-input-width': `${TIMEPICKER_SELECTOR.inputWidth}px`,
             '--selector-colon-size': `${TIMEPICKER_SELECTOR.colonSize}px`,
         };
-        return (h("div", { key: '9bf6683c63cf784bba552872b00b53a19e7bd77d', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (h("div", { key: '096e30217c77ab8faf305965528f97026eefee85', class: "sd-time-picker-selector__meridiem" }, h("div", { key: '4931f8e17bfb1cb356e1d713dfdf1635ced0429a', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && h("div", { key: 'a69fcd7379092069faaa556e7dc6649c46072314', class: "sd-time-picker-selector__divider" }), h("div", { key: '620e20c888b254533c34d626eac5012456b76052', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), h("span", { key: '483fc0afbbaf8faae65012bcead48a04bce6b446', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
+        return (h("div", { key: '690a2ee3a338498102444cd3ffb2442e84d1e5c5', class: "sd-time-picker-selector", style: cssVars }, this.useMeridiem && (h("div", { key: '29acf35f8b8081f074dd081762e798247da1ca0b', class: "sd-time-picker-selector__meridiem" }, h("div", { key: 'b115a20d0214e1180c17c59f3a8aad3b3d730466', class: "sd-time-picker-selector__meridiem-group" }, this.renderMeridiemButton('오전', 'AM', 'first'), this.renderMeridiemButton('오후', 'PM', 'end')))), this.useMeridiem && h("div", { key: '2a3c9f4b16521af48544fb430a2572b066a20647', class: "sd-time-picker-selector__divider" }), h("div", { key: '46e80292e25405564861cd75fdfc661fba93a5b1', class: "sd-time-picker-selector__time" }, this.renderColumn('hour'), h("span", { key: '48629faacd39b228deb0b29647500d3c5667d941', class: "sd-time-picker-selector__colon" }, ":"), this.renderColumn('minute'))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
-import { b as TIMEPICKER_SIZE_MAP, T as TIMEPICKER_COLORS } from './sd-time-picker.config-DUq29Nhs.js';
-import './component.field-DjKOoQuF.js';
+import { r as registerInstance, c as createEvent, h } from './index-YU6oWX32.js';
+import { b as TIMEPICKER_SIZE_MAP, T as TIMEPICKER_COLORS } from './sd-time-picker.config-nR5BQAyT.js';
+import './component.field-B9hmJn6D.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}`;
 
@@ -57,7 +57,7 @@ const SdTimePickerTrigger = class {
                 ? TIMEPICKER_COLORS.icon.disabled
                 : TIMEPICKER_COLORS.icon.default,
         };
-        return (h("div", { key: '4cd9086e21a7e7fedb6601c163dcf9c5c8f374d1', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (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 => {
@@ -65,7 +65,7 @@ const SdTimePickerTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            } }, h("sd-icon", { key: 'c38c13b3dc8c072430bb5b40765b96582696e04c', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), h("span", { key: '245e636a0645d97c825a44607516d8821cc533f9', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (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 }))));
+            } }, h("sd-icon", { key: 'a522d81a6af432b758a16f785ca8b96110589ae6', name: "clockOutline", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-time-picker-trigger__icon" }), h("span", { key: '3c4f96441cb01e9e94ae4e5294fb032e160bcde9', class: "sd-time-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder), this.clearable && hasValue && !this.disabled && (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/esm/{sd-time-picker.config-DUq29Nhs.js → sd-time-picker.config-nR5BQAyT.js}

@@ -1,11 +1,24 @@
-import { f as fieldTokens } from './component.field-DjKOoQuF.js';
+import { f as fieldTokens } from './component.field-B9hmJn6D.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"
@@ -20,17 +33,6 @@ const timepicker = {
 	},
 	selector: {
 		bg: "#FFFFFF",
-		range: {
-			heading: {
-				color: "#555555",
-				gap: "16"
-			},
-			paddingXY: "24",
-			panelGap: "24",
-			section: {
-				gap: "12"
-			}
-		},
 		radius: "8",
 		section: {
 			paddingX: "16",
@@ -47,21 +49,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/esm/sd-time-picker.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CdvQqvIe.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-YU6oWX32.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { f as formatTimeValue, a as formatTimeDisplay, T as TIMEPICKER_COLORS, b as TIMEPICKER_SIZE_MAP, p as parseTimeValue } from './sd-time-picker.config-DUq29Nhs.js';
-import './component.field-DjKOoQuF.js';
+import { f as formatTimeValue, a as formatTimeDisplay, T as TIMEPICKER_COLORS, b as TIMEPICKER_SIZE_MAP, p as parseTimeValue } from './sd-time-picker.config-nR5BQAyT.js';
+import './component.field-B9hmJn6D.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%}`;
 
@@ -153,9 +153,9 @@ const SdTimePicker = class {
             '--sd-system-color-field-border-focus': TIMEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': TIMEPICKER_COLORS.bg.default,
         };
-        return (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 }, h("div", { key: '2d25872f4d1253faf85384030de21ef283e0696d', class: "sd-time-picker", ref: el => {
+        return (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 }, h("div", { key: '86f2c4975ffb9ce8e9644e0e70fc9386266d6d71', class: "sd-time-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-time-picker-trigger", { key: 'fe4a4611216642bcee5632c2202dec0058cc6898', displayText: 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) && (h("sd-portal", { key: 'd2f921b2eee8d3cc33c52c6eb06f24188f18a78a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-time-picker-selector", { key: 'd53c348ef16a1ddac731a49d0aafe64931007d32', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, onSdUpdate: this.handleSelect })))));
+            } }, h("sd-time-picker-trigger", { key: '6df1aa71c8f94ca5191e61c79125c90ff56124d9', displayText: 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) && (h("sd-portal", { key: 'ffe406dc3b6e076fea9890ae1433bf11e2a9ca3e', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, 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/esm/sd-time-range-picker-selector.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
-import { p as parseTimeValue, f as formatTimeValue, c as clampTimePart, T as TIMEPICKER_COLORS, d as TIMEPICKER_SELECTOR } from './sd-time-picker.config-DUq29Nhs.js';
-import './component.field-DjKOoQuF.js';
+import { r as registerInstance, c as createEvent, h } from './index-YU6oWX32.js';
+import { p as parseTimeValue, f as formatTimeValue, c as clampTimePart, T as TIMEPICKER_COLORS, d as TIMEPICKER_SELECTOR } from './sd-time-picker.config-nR5BQAyT.js';
+import './component.field-B9hmJn6D.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}`;
 
@@ -209,7 +209,7 @@ const SdTimeRangePickerSelector = class {
             '--selector-bg-disabled': TIMEPICKER_COLORS.bg.disabled,
             '--selector-text-default': TIMEPICKER_COLORS.text.default,
         };
-        return (h("div", { key: 'd62a959d611bd9379c0f07cd29cea18cda66b1f6', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), h("div", { key: '23e668d0bae4a16fdc8af3be4a2c40bec2d7f1cd', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
+        return (h("div", { key: 'eceb5c9016499ae57fe40ec65a9c0066ba6509b1', class: "sd-time-range-picker-selector", style: cssVars }, this.renderPanel('start', '시작 시간'), h("div", { key: 'ce5d81d905de10a507fa3dfeda1c98ebbaace906', class: "sd-time-range-picker-selector__divider" }), this.renderPanel('end', '종료 시간')));
     }
 };
 SdTimeRangePickerSelector.style = sdTimeRangePickerSelectorCss();

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CdvQqvIe.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-YU6oWX32.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
-import { f as formatTimeValue, a as formatTimeDisplay, p as parseTimeValue, T as TIMEPICKER_COLORS, b as TIMEPICKER_SIZE_MAP } from './sd-time-picker.config-DUq29Nhs.js';
-import './component.field-DjKOoQuF.js';
+import { f as formatTimeValue, a as formatTimeDisplay, p as parseTimeValue, T as TIMEPICKER_COLORS, b as TIMEPICKER_SIZE_MAP } from './sd-time-picker.config-nR5BQAyT.js';
+import './component.field-B9hmJn6D.js';
 
 function getTimeMinutes(value) {
     const { hour, minute } = parseTimeValue(value);
@@ -181,9 +181,9 @@ const SdTimeRangePicker = class {
             '--sd-system-color-field-border-focus': TIMEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': TIMEPICKER_COLORS.bg.default,
         };
-        return (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 }, h("div", { key: '7fffb9bb91a0fa8a8fdce7704c47aea2de0b509a', class: "sd-time-range-picker", ref: el => {
+        return (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 }, h("div", { key: 'e1412d82e5eae70bbdb140f6bf06c0867f75c35c', class: "sd-time-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, 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) && (h("sd-portal", { key: 'ad91d531c8326a7e977f8c576e1026c4d6d0115c', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-time-range-picker-selector", { key: '0df138447c01169ea3e0462d012c4917ac7f904b', value: this.value, useMeridiem: this.effectiveUseMeridiem, minuteStep: this.minuteStep, "range-order": this.rangeOrder, onSdUpdate: this.handleSelect })))));
+            } }, 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) && (h("sd-portal", { key: '13ddc4c3a22661bdc170d47a533e36ada9c431c6', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, 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/esm/sd-toast-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CdvQqvIe.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-YU6oWX32.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
@@ -241,7 +241,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 (h("div", { key: '166ac21503b08853631fddaed047ab108a99570a', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '7a69bd0ea72cfb94e4e78287f6d6a0ea1a1a60a9', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
+import { r as registerInstance, c as createEvent, h } from './index-YU6oWX32.js';
 
 const toast = {
 	icon: "16",
@@ -91,12 +91,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 (h("div", { key: '5d7511c3fe5a5ef828986ff624af7c52ff087cfa', style: {
+        return (h("div", { key: 'c9e3741a53f59d37f2b384379aa6adef9cf3bb4b', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
                 '--sd-toast-icon': iconColor,
                 '--sd-toast-link': linkColor,
-            } }, h("div", { key: 'c35b42d7ece2030ed0e27abb0059f9b09c4edb9e', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '015223ab3e9d4296d3782afc0c6cfd60e54289c7', class: "sd-toast__icon" }, h("sd-icon", { key: '6d8e5d73fc026df0d8f75439b926bd027ca6a008', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: 'b601081818d66910d9d2f9984bfb9a473237b065', class: "sd-toast__content" }, h("span", { key: '6a17766f5a337cbc85179dc310fb400186f35ac6', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '80abceec8d37905073c9a8e43fcdd1a78978b5f6', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '212516f32c46938d405e68dbb156cf139b39ffd8', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (h("sd-ghost-button", { key: '9fd34f93f46d9a5a25ec52e0d164bbcaf4297e2e', class: "sd-toast__close", icon: "close", intent: useDefaultCloseIntent ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: '6340355a0ffa73765040930cca2e742427d796e2', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '2b2b03b9e7d46a71f7178b4e45f0fe3b383abc49', class: "sd-toast__icon" }, h("sd-icon", { key: '641a3f15b31009e81d590ca8dc7318c55c773e22', name: this.icon, size: iconSize, color: iconColor }))), h("div", { key: 'ec6396936145b1fb7e1071221de0d67a3415ab77', class: "sd-toast__content" }, h("span", { key: '0cc6791d14db783003c1aaefaa32757f39a7f043', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '19989545eb1f2d6f984565314de3da581ef666e4', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '3ca5c3b9d77a04c2c4d70a48641c51053794bd33', class: "sd-toast__button", name: buttonName, label: this.buttonLabel, onSdClick: (event) => this.buttonClick.emit(event.detail) })), this.useClose && (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/esm/sd-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
+import { r as registerInstance, c as createEvent, h } from './index-YU6oWX32.js';
 
 const toggle = {
 	height: "28",
@@ -121,7 +121,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'f78d58c01b943a5f22ace9cb14e50b0098cc8206', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '8b8d8e09b322a5093c57129f94c49f6951d78df7', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: 'f1e459f54be93de764c504b9719db5f4754c07d9', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: 'b0ab7d28248db1286eaf4da5d93adc1fc93a155c', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/{tooltipArrow-BsQ__AbZ.js → tooltipArrow-D3op61Yf.js}

@@ -1,4 +1,4 @@
-import { h } from './index-CdvQqvIe.js';
+import { h } from './index-YU6oWX32.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, 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/esm/{useDatePicker-DQ5Kyy_D.js → useDatePicker-DFUnA3DH.js}

@@ -1,4 +1,4 @@
-import { d as datepickerTokens } from './sd-date-picker.config-CdXJcOGr.js';
+import { d as datepickerTokens } from './sd-date-picker.config-ab8NXZUc.js';
 
 const CALENDAR_LAYOUT = {
     bg: datepickerTokens.datepicker.calendar.bg,

package/dist/types/components/sd-expansion-item/sd-expansion-item.config.d.ts

@@ -0,0 +1,57 @@
+export declare const EXPANSION_ITEM: {
+    title: {
+        paddingX: string;
+        paddingY: {
+            normal: string;
+            dense: string;
+        };
+        gap: string;
+        icon: string;
+        typography: {
+            depth1: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                textDecoration: string;
+            };
+            subitem: {
+                default: {
+                    fontFamily: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    textDecoration: string;
+                    lineHeight: string;
+                };
+                hover: {
+                    fontFamily: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    textDecoration: string;
+                    lineHeight: string;
+                };
+                expanded: {
+                    fontFamily: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    textDecoration: string;
+                    lineHeight: string;
+                };
+            };
+        };
+        border: string;
+        bg: {
+            default: string;
+            hover: string;
+            expanded: string;
+        };
+        text: {
+            default: string;
+            expanded: string;
+        };
+    };
+    body: {
+        bg: string;
+        padding: string;
+    };
+};

package/dist/types/components/sd-expansion-item/sd-expansion-item.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class SdExpansionItem {
+    /** 헤더에 표시할 텍스트 */
+    title: string;
+    /** 펼침 상태 */
+    expanded: boolean;
+    /** compact 높이 사용 여부 */
+    dense: boolean;
+    /** 중첩 단계 (1~3) */
+    depth: 1 | 2 | 3;
+    private hasBody;
+    /** body 내부 패딩 사용 여부 */
+    bodyPadding: boolean;
+    /** 토글 비활성화 여부 */
+    disabled: boolean;
+    /** 펼침 상태 변경 시 발생합니다. */
+    toggle: EventEmitter<boolean>;
+    private handleToggle;
+    private handleSlotChange;
+    render(): any;
+}

package/dist/types/components/sd-field/sd-field.d.ts

@@ -24,7 +24,11 @@ export declare class SdField implements ValidatableField {
     hint: string;
     /** 에러 메시지 */
     errorMessage: string;
-    /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
+    /**
+     * 필드 너비 (숫자면 px, 문자열이면 그대로 적용).
+     * 지정하면 필드가 부모 폭을 다 먹지 않고 (레이블 + width) 만큼만 차지한다.
+     * 다른 요소와 나란히 놓으려면 부모를 flex 로 두면 된다.
+     */
     width: string | number;
     /** 필드 크기 */
     size: FieldSize;

package/dist/types/components/sd-number-input/sd-number-input.config.d.ts

@@ -47,8 +47,8 @@ export declare const NUMBER_INPUT_HINT: {
         fontFamily: string;
         fontWeight: string;
         fontSize: string;
-        lineHeight: string;
         textDecoration: string;
+        lineHeight: string;
     };
     color: string;
 };
@@ -57,8 +57,8 @@ export declare const NUMBER_INPUT_ERROR_MESSAGE: {
         fontFamily: string;
         fontWeight: string;
         fontSize: string;
-        lineHeight: string;
         textDecoration: string;
+        lineHeight: string;
     };
     color: string;
 };

package/dist/types/components/sd-time-picker/sd-time-picker.config.d.ts

@@ -15,10 +15,10 @@ export interface TimePickerSizeTokens {
 export declare const TIMEPICKER_SIZE_MAP: Record<TimePickerSize, TimePickerSizeTokens>;
 export declare const TIMEPICKER_COLORS: {
     border: {
+        width: string;
         default: string;
         focus: string;
         disabled: string;
-        width: string;
     };
     bg: {
         default: string;
@@ -50,12 +50,19 @@ export declare const TIMEPICKER_SELECTOR: {
     inputWidth: string;
     colonSize: string;
     range: {
+        paddingXY: string;
+        panelGap: string;
         heading: {
             color: string;
+            typography: {
+                fontFamily: string;
+                fontSize: string;
+                textDecoration: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
             gap: string;
         };
-        paddingXY: string;
-        panelGap: string;
         section: {
             gap: string;
         };