@sellmate/design-system 1.29.0 → 1.32.0

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

@@ -0,0 +1,50 @@
+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);
+}

package/dist/collection/components/sd-stepper/sd-stepper.js

@@ -0,0 +1,186 @@
+import { h } from "@stencil/core";
+import { STEPPER_COLORS, STEPPER_LAYOUT, STEPPER_SIZES, } from "./sd-stepper.config";
+export class SdStepper {
+    /** 단계 목록 */
+    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 is() { return "sd-stepper"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-stepper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "StepperItem[]",
+                    "resolved": "StepperItem[]",
+                    "references": {
+                        "StepperItem": {
+                            "location": "import",
+                            "path": "./sd-stepper.config",
+                            "id": "src/components/sd-stepper/sd-stepper.config.ts::StepperItem",
+                            "referenceLocation": "StepperItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uB2E8\uACC4 \uBAA9\uB85D"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD604\uC7AC \uD65C\uC131 \uB2E8\uACC4 value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StepperSize",
+                    "resolved": "\"lg\" | \"sm\"",
+                    "references": {
+                        "StepperSize": {
+                            "location": "import",
+                            "path": "./sd-stepper.config",
+                            "id": "src/components/sd-stepper/sd-stepper.config.ts::StepperSize",
+                            "referenceLocation": "StepperSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uD06C\uAE30"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'sm'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC811\uADFC\uC131 \uB808\uC774\uBE14"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'\uC9C4\uD589 \uB2E8\uACC4'"
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}

package/dist/collection/components/sd-switch/sd-switch.js

@@ -3,7 +3,14 @@ import { SWITCH_COLORS, SWITCH_LAYOUT, SWITCH_TYPOGRAPHY } from "./sd-switch.con
 export class SdSwitch {
     /** 현재 on/off 상태 */
     value = false;
-    /** 표시할 라벨 텍스트 */
+    /** 스위치 좌측 라벨 */
+    leftLabel;
+    /** 스위치 우측 라벨 */
+    rightLabel;
+    /**
+     * 표시할 라벨 텍스트
+     * @deprecated `rightLabel` 사용. 우측 라벨(하위호환)
+     */
     label = '';
     /** 비활성 상태 여부 */
     disabled = false;
@@ -45,7 +52,10 @@ export class SdSwitch {
             '--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)));
     }
     static get is() { return "sd-switch"; }
     static get originalStyleUrls() {
@@ -80,6 +90,44 @@ export class SdSwitch {
                 "attribute": "value",
                 "defaultValue": "false"
             },
+            "leftLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2A4\uC704\uCE58 \uC88C\uCE21 \uB77C\uBCA8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-label"
+            },
+            "rightLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\uC2A4\uC704\uCE58 \uC6B0\uCE21 \uB77C\uBCA8"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-label"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -91,7 +139,10 @@ export class SdSwitch {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "`rightLabel` \uC0AC\uC6A9. \uC6B0\uCE21 \uB77C\uBCA8(\uD558\uC704\uD638\uD658)"
+                        }],
                     "text": "\uD45C\uC2DC\uD560 \uB77C\uBCA8 \uD14D\uC2A4\uD2B8"
                 },
                 "getter": false,

package/dist/collection/components/sd-tabs/sd-tabs.js

@@ -78,7 +78,7 @@ export class SdTabs {
         };
     }
     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/collection/components/sd-tag/sd-tag.js

@@ -7,9 +7,8 @@ export class SdTag {
     label = '';
     /** 아이콘명 */
     icon;
-    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
-    /** true이면 아이콘을 레이블 왼쪽에 배치 */
-    isLeft = true;
+    /** 아이콘을 레이블 왼쪽에 배치할지 여부 (기본값 true) */
+    iconLeft = true;
     /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
     width = '';
     componentWillLoad() {
@@ -38,7 +37,7 @@ export class SdTag {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
         const width = this.resolvedWidth;
-        return (h(Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
+        return (h(Host, { key: '9e893a8ec67d1baa12cdfe030d3ae15798666c0c', style: width != null ? { '--sd-tag-width': width } : undefined }, h("span", { key: 'fe6b05143032b33bec7cc95ce5355701e894d0ea', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -48,7 +47,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.iconLeft && iconNode, h("span", { key: '9c4a07ac015672839dc5dda40d01609870979e04', class: "sd-tag__label" }, this.label), this.icon && !this.iconLeft && iconNode)));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {
@@ -134,7 +133,7 @@ export class SdTag {
                 "reflect": false,
                 "attribute": "icon"
             },
-            "isLeft": {
+            "iconLeft": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -146,12 +145,12 @@ export class SdTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "true\uC774\uBA74 \uC544\uC774\uCF58\uC744 \uB808\uC774\uBE14 \uC67C\uCABD\uC5D0 \uBC30\uCE58"
+                    "text": "\uC544\uC774\uCF58\uC744 \uB808\uC774\uBE14 \uC67C\uCABD\uC5D0 \uBC30\uCE58\uD560\uC9C0 \uC5EC\uBD80 (\uAE30\uBCF8\uAC12 true)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "is-left",
+                "attribute": "icon-left",
                 "defaultValue": "true"
             },
             "width": {

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -57,7 +57,7 @@ export class SdTextLink {
         };
         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 => {
@@ -65,13 +65,13 @@ export class SdTextLink {
                     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 })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-textarea/sd-textarea.js

@@ -139,7 +139,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '2f967ed7e9d9e419376162f9569847b931f126d5', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, 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: 'aa4f554c200a1b0aeadf4cac635facfabb158b90', class: "sd-textarea__content" }, h("textarea", { key: 'fe0026af57e40e6d4fb8e16c87985352de401fa5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: '007bdda5f38f94997c65f3542b4075a62c11a391', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, 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: '536185bb53815baae7807a5d4708d9f0100c07c1', class: "sd-textarea__content" }, h("textarea", { key: '144ae3ca78f8c3953bfef9951cb79952186b856c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.css

@@ -0,0 +1,87 @@
+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;
+}