@sellmate/design-system 1.29.0 → 1.32.0

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

@@ -0,0 +1,188 @@
+import { r as registerInstance, h } from './index-CdvQqvIe.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) {
+        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 (h("div", { key: '0255899ce447c38d44a618acc72692d2c746ebc3', class: "sd-stepper", role: "list", "aria-label": this.ariaLabel, style: this.buildCssVars() }, this.items.map((item, index) => {
+            const state = this.getState(index);
+            const className = [
+                'sd-stepper__item',
+                `sd-stepper__item--${state}`,
+            ]
+                .filter(Boolean)
+                .join(' ');
+            return [
+                h("span", { class: className, role: "listitem", "aria-current": state === 'active' ? 'step' : undefined, style: this.getStateVars(state) }, h("span", { class: "sd-stepper__sequence", "aria-hidden": "true" }, state === 'completed' ? (h("sd-icon", { name: "check", size: STEPPER_LAYOUT.iconSize, color: "currentColor" })) : (index + 1)), h("span", { class: "sd-stepper__label" }, item.label)),
+                index < this.items.length - 1 && (h("span", { class: "sd-stepper__dash", "aria-hidden": "true" }, h("svg", { width: STEPPER_LAYOUT.dashWidth, height: "1", viewBox: `0 0 ${STEPPER_LAYOUT.dashWidth} 1`, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "1.6", height: "1", fill: "#888888" }), h("rect", { x: "5", width: "3.3", height: "1", fill: "#888888" }), h("rect", { x: "11.7", width: "3.3", height: "1", fill: "#888888" }), h("rect", { x: "18.4", width: "1.6", height: "1", fill: "#888888" })))),
+            ];
+        })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdStepper.style = sdStepperCss();
+
+export { SdStepper as sd_stepper };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
 
 var switchTokens = {
 	"switch": {
@@ -65,7 +65,14 @@ const SdSwitch = class {
     }
     /** 현재 on/off 상태 */
     value = false;
-    /** 표시할 라벨 텍스트 */
+    /** 스위치 좌측 라벨 */
+    leftLabel;
+    /** 스위치 우측 라벨 */
+    rightLabel;
+    /**
+     * 표시할 라벨 텍스트
+     * @deprecated `rightLabel` 사용. 우측 라벨(하위호환)
+     */
     label = '';
     /** 비활성 상태 여부 */
     disabled = false;
@@ -107,7 +114,10 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '96321de1da84594a8c4fc760c44e49f12168be13', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: '5c89628f13ef22e19fadc53eea7e42428e783e83', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '11aa858c208ae5fb7c0f782e857abced64bcb0c3', class: "sd-switch__track" }, h("div", { key: '9fc34ece3e66ca3c60824e44123d98a4179924ee', class: "sd-switch__knob" })), this.label && h("span", { key: '1439b0ef2b5511560e5737452d1d21e74801e325', class: "sd-switch__label" }, this.label)));
+        // label(deprecated)은 rightLabel 로 흡수 (하위호환)
+        const right = this.rightLabel ?? this.label;
+        const accessibleName = [this.leftLabel, right].filter(Boolean).join(' ') || 'switch';
+        return (h("label", { key: '3ff528a7fe1a39cae2475d31af98036dd5f0c7d8', "aria-label": accessibleName, class: this.switchClasses, style: cssVars }, h("input", { key: '02e54ab9b626be19ff1efd330069e3f9477367c6', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.leftLabel && h("span", { key: '2eed006c7de45f1cda9d009fa4228c8cb1f56755', class: "sd-switch__label" }, this.leftLabel), h("div", { key: '031c7c3121c54a45b7de0187c31e2e298a0f9701', class: "sd-switch__track" }, h("div", { key: '15a3225b7dd4deab98feb4f6581d89f9cf480edd', class: "sd-switch__knob" })), right && h("span", { key: '04b2185de5b5d2c05f24b3818c6dbc1300680d13', class: "sd-switch__label" }, right)));
     }
 };
 SdSwitch.style = sdSwitchCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, h } from './index-CdvQqvIe.js';
 
 const tab = {
 	main: {
@@ -205,7 +205,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: '4306137f9dd004ec5ef43b8bdd9e3614adab23ed', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: 'c88c2d10181fd02076ac9c0ecdb6d3e95bd727c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, 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/esm/sd-text-link.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dz490Ukt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CdvQqvIe.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: 'd9653ed47a77fb5c00dc57f8f7cc2b4dc9035ca4', role: "button", tabindex: this.disabled ? -1 : 0, class: {
+        return (h("span", { key: '363829c6d53fc3df03dee7ddd290ca078c255039', 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: '62b3cb48c5b5fa6eb0b2b2962ef6c78bac5ac545', parentRef: this.hostEl, open: true, offset: [this.hostEl.offsetWidth / 2, 4], placement: "top" }, h("div", { key: '5a428366f5bc2f8686a78fc73d91517ccca13eb9', class: "sd-text-link__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: '3416662595e9bfd164279e684e2ead9d1575a9d8', name: "square_xs_grey", label: tooltipText })))), this.icon && (h("sd-icon", { key: '5056f0c55ebe92963e856f2970cfd74143876cfb', name: this.icon, size: sizeConfig.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '6cf8474ba642c9ec3dc5952c5530f9ba15046053', class: labelClassName }, this.label), this.rightArrow && this.rightArrow !== 'none' && (h("span", { key: '17a74ec3a3e1a26f18b73f7d4816ea0aee0cb22c', 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: '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: {
                 width: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 height: `${TEXT_LINK_ARROW.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: 'ed0a6bf8b678a93fa8a0da907efb0cbf60427738', name: this.rightArrow === 'chevron' ? 'chevronRight' : 'caretRight', size: TEXT_LINK_ARROW.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'b74ca3398a1dd74ac5a9f7a16c872d313882fd4d', 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

@@ -0,0 +1,177 @@
+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';
+
+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}`;
+
+const SdTimePickerSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.update = createEvent(this, "sdUpdate", 7);
+    }
+    /** 선택된 시간 (HH:mm) */
+    value = null;
+    /** 오전/오후 선택 표시 여부 */
+    useMeridiem = true;
+    /** 분 증감 단위 */
+    minuteStep = 1;
+    /** 시간 변경 시 발생합니다. */
+    update;
+    valueChanged() {
+        this.syncFromValue();
+    }
+    editingPart = null;
+    inputDraft = {};
+    hour = 0;
+    minute = 0;
+    componentWillLoad() {
+        this.syncFromValue();
+    }
+    syncFromValue() {
+        const parsed = parseTimeValue(this.value);
+        this.hour = parsed.hour;
+        this.minute = parsed.minute;
+    }
+    get meridiem() {
+        return this.hour >= 12 ? 'PM' : 'AM';
+    }
+    get displayHour() {
+        if (!this.useMeridiem)
+            return this.hour;
+        const hour = this.hour % 12;
+        return hour === 0 ? 12 : hour;
+    }
+    emitNext(hour, minute) {
+        this.hour = clampTimePart(hour, 0, 23);
+        this.minute = clampTimePart(minute, 0, 59);
+        this.update.emit(formatTimeValue(this.hour, this.minute));
+    }
+    sanitizeInput(value) {
+        return value.replace(/\D/g, '').slice(0, 2);
+    }
+    setDraft(part, value) {
+        this.inputDraft = { ...this.inputDraft, [part]: value };
+    }
+    beginEdit(part, value) {
+        this.editingPart = part;
+        this.setDraft(part, String(value).padStart(2, '0'));
+    }
+    commitHourDraft(draft) {
+        const raw = clampTimePart(Number(draft), this.useMeridiem ? 1 : 0, this.useMeridiem ? 12 : 23);
+        const nextHour = this.useMeridiem
+            ? this.meridiem === 'PM'
+                ? raw === 12
+                    ? 12
+                    : raw + 12
+                : raw === 12
+                    ? 0
+                    : raw
+            : raw;
+        this.emitNext(nextHour, this.minute);
+        return raw;
+    }
+    commitMinuteDraft(draft) {
+        const minute = clampTimePart(Number(draft), 0, 59);
+        this.emitNext(this.hour, minute);
+        return minute;
+    }
+    endEdit(part) {
+        const draft = this.inputDraft[part];
+        if (part === 'hour' && draft != null && draft !== '') {
+            this.commitHourDraft(draft);
+        }
+        if (part === 'minute' && draft != null && draft !== '') {
+            this.commitMinuteDraft(draft);
+        }
+        this.editingPart = null;
+        this.inputDraft = {};
+    }
+    setMeridiem(meridiem) {
+        if (meridiem === this.meridiem)
+            return;
+        if (meridiem === 'AM') {
+            this.emitNext(this.hour - 12, this.minute);
+            return;
+        }
+        this.emitNext(this.hour + 12, this.minute);
+    }
+    changeHour(delta) {
+        this.emitNext((this.hour + delta + 24) % 24, this.minute);
+    }
+    changeMinute(delta) {
+        const next = this.minute + delta;
+        if (next > 59) {
+            this.emitNext((this.hour + 1) % 24, next - 60);
+            return;
+        }
+        if (next < 0) {
+            this.emitNext((this.hour + 23) % 24, next + 60);
+            return;
+        }
+        this.emitNext(this.hour, next);
+    }
+    handleHourInput = (event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft('hour', draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const raw = this.commitHourDraft(draft);
+        const displayDraft = Number(draft) === raw ? draft : String(raw);
+        target.value = displayDraft;
+        this.setDraft('hour', displayDraft);
+    };
+    handleMinuteInput = (event) => {
+        const target = event.target;
+        const draft = this.sanitizeInput(target.value);
+        target.value = draft;
+        this.setDraft('minute', draft);
+        if (draft === '')
+            return;
+        if (draft.length < 2)
+            return;
+        const nextMinute = this.commitMinuteDraft(draft);
+        const displayDraft = Number(draft) === nextMinute ? draft : String(nextMinute);
+        target.value = displayDraft;
+        this.setDraft('minute', displayDraft);
+        this.emitNext(this.hour, nextMinute);
+    };
+    renderMeridiemButton(label, meridiem, position) {
+        const selected = this.meridiem === meridiem;
+        return (h("button", { type: "button", class: {
+                'sd-time-picker-selector__meridiem-button': true,
+                'sd-time-picker-selector__meridiem-button--selected': selected,
+                [`sd-time-picker-selector__meridiem-button--${position}`]: true,
+            }, onClick: () => this.setMeridiem(meridiem) }, label));
+    }
+    renderColumn(type) {
+        const isHour = type === 'hour';
+        const value = isHour ? this.displayHour : this.minute;
+        const displayValue = this.editingPart === type ? (this.inputDraft[type] ?? '') : String(value).padStart(2, '0');
+        return (h("div", { class: `sd-time-picker-selector__column sd-time-picker-selector__column--${type}` }, h("sd-ghost-button", { icon: "chevronUp", size: "xs", ariaLabel: `${isHour ? '시' : '분'} 증가`, onSdClick: () => (isHour ? this.changeHour(1) : this.changeMinute(this.minuteStep)) }), h("input", { class: "sd-time-picker-selector__input", type: "text", inputmode: "numeric", value: displayValue, placeholder: "-", onFocus: () => this.beginEdit(type, value), onBlur: () => this.endEdit(type), onInput: isHour ? this.handleHourInput : this.handleMinuteInput, "aria-label": isHour ? '시' : '분' }), h("sd-ghost-button", { icon: "chevronDown", size: "xs", ariaLabel: `${isHour ? '시' : '분'} 감소`, onSdClick: () => (isHour ? this.changeHour(-1) : this.changeMinute(-this.minuteStep)) })));
+    }
+    render() {
+        const cssVars = {
+            '--selector-bg': TIMEPICKER_SELECTOR.bg,
+            '--selector-radius': `${TIMEPICKER_SELECTOR.radius}px`,
+            '--selector-section-padding-x': `${TIMEPICKER_SELECTOR.section.paddingX}px`,
+            '--selector-section-padding-y': `${TIMEPICKER_SELECTOR.section.paddingY}px`,
+            '--selector-time-gap': `${TIMEPICKER_SELECTOR.time.gap}px`,
+            '--selector-time-column-gap': `${TIMEPICKER_SELECTOR.time.column.gap}px`,
+            '--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'))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdTimePickerSelector.style = sdTimePickerSelectorCss();
+
+export { SdTimePickerSelector as sd_time_picker_selector };

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

@@ -0,0 +1,73 @@
+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';
+
+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}`;
+
+const SdTimePickerTrigger = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.triggerClick = createEvent(this, "sdTriggerClick", 7);
+        this.clear = createEvent(this, "sdClear", 7);
+    }
+    /** 표시할 시간 텍스트 */
+    displayText = '';
+    /** 입력 힌트 텍스트 */
+    placeholder = '00:00';
+    /** 비활성 상태 여부 */
+    disabled = false;
+    /** 지우기 버튼 표시 여부 */
+    clearable = false;
+    /** 트리거 크기 */
+    size = 'sm';
+    /** 트리거 클릭 시 발생합니다. */
+    triggerClick;
+    /** 지우기 버튼 클릭 시 발생합니다. */
+    clear;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.triggerClick.emit();
+    };
+    handleClear = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.clear.emit();
+    };
+    render() {
+        const sizeTokens = TIMEPICKER_SIZE_MAP[this.size] ?? TIMEPICKER_SIZE_MAP.sm;
+        const hasValue = this.displayText !== '';
+        const textMinWidth = this.size === 'md' ? 96 : 80;
+        const cssVars = {
+            '--trigger-padding-x': `${sizeTokens.paddingX}px`,
+            '--trigger-gap': `${sizeTokens.gap}px`,
+            '--trigger-icon-size': `${sizeTokens.iconSize}px`,
+            '--trigger-font-size': `${sizeTokens.fontSize}px`,
+            '--trigger-line-height': `${sizeTokens.lineHeight}px`,
+            '--trigger-font-weight': sizeTokens.fontWeight,
+            '--trigger-radius': `${sizeTokens.radius}px`,
+            '--trigger-text-min-width': `${textMinWidth}px`,
+            '--trigger-text-color': this.disabled
+                ? TIMEPICKER_COLORS.text.disabled
+                : hasValue
+                    ? TIMEPICKER_COLORS.text.default
+                    : TIMEPICKER_COLORS.text.hint,
+            '--trigger-icon-color': this.disabled
+                ? TIMEPICKER_COLORS.icon.disabled
+                : TIMEPICKER_COLORS.icon.default,
+        };
+        return (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 => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    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 }))));
+    }
+};
+SdTimePickerTrigger.style = sdTimePickerTriggerCss();
+
+export { SdTimePickerTrigger as sd_time_picker_trigger };