@sellmate/design-system 1.19.0 → 1.20.0

package/dist/esm/{sd-ghost-button_2.entry.js → sd-ghost-button_3.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-CAxodB5I.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-CAxodB5I.js';
 
 const ghostButton = {
 	xxs: {
@@ -112,7 +112,7 @@ const GHOST_BUTTON_DISABLED_COLORS = {
     inverse: ghostButtonTokens.ghostButton.inverse.disabled,
 };
 
-const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%) translateY(4px);z-index:1;display:inline-flex;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease}.sd-ghost-button--with-tooltip:hover:not(.sd-ghost-button--disabled) .sd-ghost-button__tooltip,.sd-ghost-button--with-tooltip:focus-visible:not(.sd-ghost-button--disabled) .sd-ghost-button__tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}`;
+const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}.sd-ghost-button__tooltip-inner{display:inline-flex;white-space:nowrap;transform:translateX(-50%)}`;
 
 const SdGhostButton = class {
     constructor(hostRef) {
@@ -123,15 +123,16 @@ const SdGhostButton = class {
     size = 'sm';
     intent = 'default';
     ariaLabel = '';
-    tooltipLabel = '';
+    tooltipText;
     disabled = false;
+    get hostEl() { return getElement(this); }
+    isTooltipOpen = false;
     click;
     hasWarnedMissingAriaLabel = false;
     componentWillLoad() {
         this.size ??= 'sm';
         this.intent ??= 'default';
         this.ariaLabel ??= '';
-        this.tooltipLabel ??= '';
     }
     handleClick = (event) => {
         if (this.disabled) {
@@ -140,6 +141,10 @@ const SdGhostButton = class {
         }
         this.click.emit(event);
     };
+    handleMouseEnter = () => { this.isTooltipOpen = true; };
+    handleMouseLeave = () => { this.isTooltipOpen = false; };
+    handleFocus = () => { this.isTooltipOpen = true; };
+    handleBlur = () => { this.isTooltipOpen = false; };
     componentWillRender() {
         this.warnIfMissingAriaLabel();
     }
@@ -162,23 +167,271 @@ const SdGhostButton = class {
             ? GHOST_BUTTON_DISABLED_COLORS[intent]
             : GHOST_BUTTON_CONTENT_COLORS[intent];
         const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        const tooltipLabel = (this.tooltipLabel ?? '').trim();
-        const hasTooltip = tooltipLabel.length > 0;
-        return (h("button", { key: 'fafdeaa60205f0190cc592ac8fdacbf140e28d6c', class: {
+        const tooltipText = (this.tooltipText ?? '').trim();
+        const hasTooltip = tooltipText.length > 0;
+        return (h("button", { key: '59b95275f6acd737d4b0d5c2187e1d40b3a6543f', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
-                'sd-ghost-button--with-tooltip': hasTooltip,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, hasTooltip && (h("span", { key: '57425145ccc76a0bf960377cb13ba06e37195fa3', class: "sd-ghost-button__tooltip", "aria-hidden": "true" }, h("sd-tag", { key: '9d097c96d701431ac92aa7fb305c418bb570bc16', name: "square_xs_grey", label: tooltipLabel }))), h("sd-icon", { key: '4b186b2fd33c70f4b47a2c736a53e1ac37bc2ebc', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur }, hasTooltip && this.isTooltipOpen && !this.disabled && (h("sd-portal", { key: 'd8ca94b6a931208c2c56eb2dbfee843935c6b666', parentRef: this.hostEl, open: true, offset: [sizeConfig.size / 2, 4], placement: "top" }, h("div", { key: '450d5dc528ad4eeb4a2a0d2920fe4553ab3f91f8', class: "sd-ghost-button__tooltip-inner", "aria-hidden": "true" }, h("sd-tag", { key: 'cc25d0e2794d3d4dc418b0c0aa1a57e4b76b56e1', name: "square_xs_grey", label: tooltipText })))), h("sd-icon", { key: 'bf9bf8bcc779011635fd34566ec7320d76f8d16b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
 };
 SdGhostButton.style = sdGhostButtonCss();
 
+const SdPortal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "sdClose", 3);
+    }
+    get hostEl() { return getElement(this); }
+    to = 'body';
+    parentRef = null;
+    offset = [0, 4];
+    viewportPadding = 0;
+    zIndex = 998;
+    open = false;
+    placement = 'bottom';
+    close;
+    container;
+    wrapper;
+    rafId;
+    isInsideClick = false;
+    closeTransitionTimer;
+    handleObservedScroll = () => this.updatePosition();
+    resizeObserver;
+    mutationObserver;
+    scrollParents = [];
+    isObserved = false;
+    handleOpenChange() {
+        this.syncPortalState();
+    }
+    componentDidLoad() {
+        this.container = this.resolveContainer();
+        this.syncPortalState();
+    }
+    componentDidRender() {
+        this.syncPortalState();
+    }
+    disconnectedCallback() {
+        if (this.closeTransitionTimer)
+            clearTimeout(this.closeTransitionTimer);
+        this.unobserveParent();
+        if (this.wrapper?.parentNode) {
+            try {
+                this.wrapper.parentNode.removeChild(this.wrapper);
+            }
+            catch {
+                // Stencil spec mock DOM can already detach the wrapper before this callback runs.
+            }
+        }
+    }
+    resolveContainer() {
+        const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;
+        return el instanceof HTMLElement ? el : document.body;
+    }
+    createWrapper() {
+        this.wrapper = document.createElement('div');
+        Object.assign(this.wrapper.style, {
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            zIndex: (this.zIndex ?? 998).toString(),
+            opacity: '0',
+            transition: 'opacity 0.15s ease-out',
+            boxSizing: 'border-box',
+            visibility: 'hidden',
+        });
+        this.container.appendChild(this.wrapper);
+    }
+    ensureWrapper() {
+        if (this.wrapper)
+            return;
+        this.container ||= this.resolveContainer();
+        this.createWrapper();
+        this.moveSlotContent();
+    }
+    syncPortalState() {
+        if (!this.open) {
+            if (this.wrapper) {
+                this.wrapper.style.transition = 'opacity 0.15s ease-out';
+                this.wrapper.style.opacity = '0';
+                this.wrapper.style.pointerEvents = 'none';
+                if (this.closeTransitionTimer)
+                    clearTimeout(this.closeTransitionTimer);
+                this.closeTransitionTimer = setTimeout(() => {
+                    if (this.wrapper && !this.open) {
+                        this.wrapper.style.display = 'none';
+                    }
+                }, 150);
+            }
+            this.unobserveParent();
+            return;
+        }
+        if (this.closeTransitionTimer)
+            clearTimeout(this.closeTransitionTimer);
+        this.ensureWrapper();
+        if (!this.wrapper)
+            return;
+        this.wrapper.style.display = 'block';
+        this.wrapper.style.transition = 'opacity 0.25s ease-out';
+        this.wrapper.style.opacity = '0';
+        this.wrapper.style.pointerEvents = '';
+        this.observeParent();
+        this.updatePosition();
+    }
+    moveSlotContent() {
+        if (!this.wrapper)
+            return;
+        const nodes = Array.from(this.hostEl.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);
+        nodes.forEach(n => this.wrapper.appendChild(n));
+    }
+    // 위치 갱신 (scroll / resize)
+    updatePosition() {
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            if (!this.parentRef || !this.wrapper)
+                return;
+            const parentRect = this.parentRef.getBoundingClientRect();
+            const viewport = {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            };
+            const offset = this.offset ?? [0, 4];
+            const viewportPadding = Math.max(0, this.viewportPadding ?? 0);
+            const maxWidth = Math.max(viewport.width - viewportPadding * 2, 0);
+            const maxHeight = Math.max(viewport.height - viewportPadding * 2, 0);
+            this.wrapper.style.maxWidth = `${maxWidth}px`;
+            this.wrapper.style.maxHeight = `${maxHeight}px`;
+            const wrapperRect = this.wrapper.getBoundingClientRect();
+            const availableBelow = viewport.height - parentRect.bottom - offset[1] - viewportPadding;
+            const availableAbove = parentRect.top - offset[1] - viewportPadding;
+            const preferTop = (this.placement ?? 'bottom') === 'top';
+            let top;
+            let left = parentRect.left + offset[0];
+            if (preferTop) {
+                top = parentRect.top - wrapperRect.height - offset[1];
+                if (availableAbove < wrapperRect.height && availableBelow > availableAbove) {
+                    top = parentRect.bottom + offset[1];
+                }
+            }
+            else {
+                top = parentRect.bottom + offset[1];
+                if (availableBelow < wrapperRect.height && availableAbove > availableBelow) {
+                    top = parentRect.top - wrapperRect.height - offset[1];
+                }
+            }
+            const minTop = viewportPadding;
+            const maxTop = viewport.height - viewportPadding - wrapperRect.height;
+            if (maxTop < minTop) {
+                top = minTop;
+            }
+            else {
+                top = Math.min(Math.max(top, minTop), maxTop);
+            }
+            if (parentRect.left + wrapperRect.width + offset[0] > viewport.width - viewportPadding) {
+                left = parentRect.right - wrapperRect.width - offset[0];
+            }
+            const minLeft = viewportPadding;
+            const maxLeft = viewport.width - viewportPadding - wrapperRect.width;
+            if (maxLeft < minLeft) {
+                left = minLeft;
+            }
+            else {
+                left = Math.min(Math.max(left, minLeft), maxLeft);
+            }
+            this.wrapper.style.top = `${top}px`;
+            this.wrapper.style.left = `${left}px`;
+            this.wrapper.style.visibility = 'visible';
+            this.wrapper.style.opacity = '1';
+        });
+    }
+    // parentRef의 이동 / 크기변경 감지
+    observeParent() {
+        if (!this.parentRef || this.isObserved)
+            return;
+        this.observeScrollParents(this.parentRef);
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.updatePosition());
+            this.resizeObserver.observe(this.parentRef);
+        }
+        if (typeof MutationObserver !== 'undefined') {
+            this.mutationObserver = new MutationObserver(() => this.updatePosition());
+            this.mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        this.isObserved = true;
+    }
+    unobserveParent() {
+        if (!this.isObserved)
+            return;
+        this.unobserveScrollParents();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.mutationObserver?.disconnect();
+        this.mutationObserver = undefined;
+        this.isObserved = false;
+    }
+    observeScrollParents(element) {
+        const nextScrollParents = this.getScrollParents(element);
+        nextScrollParents.forEach(parent => {
+            parent.addEventListener('scroll', this.handleObservedScroll, { passive: true });
+        });
+        this.scrollParents = nextScrollParents;
+    }
+    unobserveScrollParents() {
+        this.scrollParents.forEach(parent => {
+            parent.removeEventListener('scroll', this.handleObservedScroll);
+        });
+        this.scrollParents = [];
+    }
+    getScrollParents(element) {
+        const scrollParents = [];
+        let currentElement = element.parentElement;
+        while (currentElement) {
+            const { overflow, overflowX, overflowY } = getComputedStyle(currentElement);
+            const isScrollable = [overflow, overflowX, overflowY].some(value => /(auto|scroll|overlay)/.test(value));
+            if (isScrollable) {
+                scrollParents.push(currentElement);
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return scrollParents;
+    }
+    isInsideTarget(target) {
+        return !!((this.wrapper?.contains(target)) ||
+            (this.parentRef?.contains(target)));
+    }
+    // 외부 클릭 감지
+    handleMouseDown(e) {
+        this.isInsideClick = this.isInsideTarget(e.target);
+    }
+    handleWindowClick(e) {
+        if (this.isInsideClick) {
+            this.isInsideClick = false;
+            return;
+        }
+        if (this.isInsideTarget(e.target))
+            return;
+        this.close.emit();
+    }
+    render() {
+        return h("slot", { key: '911d01b26a26a4bb4d7c4a15b51755acb9615c3a' });
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+
 const tag = {
 	xs: {
 		height: "20",
@@ -386,7 +639,7 @@ const SdTag = class {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: 'b4d86dee7290a74d73fd27a9a4133c5c0ef9b750', class: "sd-tag", style: {
+        return (h("span", { key: '3117d8d5f3d9751dc193e426dbab7e0ead9fb369', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -396,9 +649,9 @@ const SdTag = class {
                 '--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: '490c703ca9ce3d0516b1da89fec18045a750d715', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '8c299f140dc5bd026ed52d3f0921939bbf69fdd5', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();
 
-export { SdGhostButton as sd_ghost_button, SdTag as sd_tag };
+export { SdGhostButton as sd_ghost_button, SdPortal as sd_portal, SdTag as sd_tag };

package/dist/esm/sd-key-value-table.entry.js

@@ -37,7 +37,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
     tdLineHeight: Number(t.body.typography.lineHeight),
 };
 
-const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-usetop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
 
 const SdKeyValueTable = class {
     constructor(hostRef) {
@@ -57,7 +57,7 @@ const SdKeyValueTable = class {
     /**
      * 테이블 border-radius 제어.
      * - 'default': 전체 radius 적용
-     * - 'usetop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
+     * - 'useTop': 상단 radius 0 (헤더·탭 등 하단에 붙여 쓸 때)
      * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
     radius = 'default';
@@ -235,7 +235,7 @@ const SdKeyValueTable = class {
         const maxCols = this.computeMaxCols(autoSkip);
         const tableEl = (h("table", { class: {
                 'sd-key-value-table': true,
-                'sd-key-value-table--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table--radius-useTop': this.radius === 'useTop',
                 'sd-key-value-table--radius-full': this.radius === 'full',
             }, style: cssVars }, h("colgroup", null, Array.from({ length: maxCols }, (_, i) => {
             if (i % 2 !== 0)
@@ -260,7 +260,7 @@ const SdKeyValueTable = class {
             return tableEl;
         return (h("div", { class: {
                 'sd-key-value-table__wrapper': true,
-                'sd-key-value-table__wrapper--radius-usetop': this.radius === 'usetop',
+                'sd-key-value-table__wrapper--radius-useTop': this.radius === 'useTop',
                 'sd-key-value-table__wrapper--radius-full': this.radius === 'full',
             }, style: cssVars }, tableEl, h("div", { class: "sd-key-value-table__search-panel" }, h("sd-button", { label: "\uAC80\uC0C9", name: "neutral_outline_md", onSdClick: this.handleSearchClick }))));
     }

package/dist/esm/sd-linear-progress.entry.js

@@ -47,7 +47,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (h(Host, { key: '26b1e15732e289a9a37a6d3dbea24aec1ab60ffd', style: hostStyle }, h("div", { key: '5162d60390656286b56f6a96fd4b3932f399412a', class: 'sd-linear-progress__track' }, h("div", { key: 'a46b815f935b243e4b7f8988af65167e3f87b554', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: 'bc91914addd5addb84c7684a1f862033950905fc', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'c62cdc59464823286ff42fc7e97a7a255a2beeb4', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '4c7c280885c8411329f99c3fe04f5ede8b1f0708', class: 'sd-linear-progress__label' }, this.label)));
+        return (h(Host, { key: '1e6aa9c81d3e9516a2f986d3f209df005de38f48', style: hostStyle }, h("div", { key: '06115d6245603c7ae54d892a23074f34db203592', class: 'sd-linear-progress__track' }, h("div", { key: '353549cb3c885cef86f114830599f375bfad8e50', class: 'sd-linear-progress__fill', style: fillStyle }), !this.indeterminate && (h("span", { key: '61afec063cd8f6ccaca27217fe7b599926245192', class: 'sd-linear-progress__value sd-linear-progress__value--on-track' }, valueText)), !this.indeterminate && (h("span", { key: 'fec238b0a6c73e06db3e53c019319a21b62e2836', class: 'sd-linear-progress__value sd-linear-progress__value--on-fill', style: valueOnFillStyle }, valueText))), this.label && h("span", { key: '668f63765b78c1047e3b850f3a17d6b2a1b9bfd4', class: 'sd-linear-progress__label' }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

package/dist/esm/sd-loading-container.entry.js

@@ -16,10 +16,10 @@ const SdLoadingContainer = class {
         this.visible = false;
     }
     render() {
-        return (h("div", { key: '2ad17acec76cfb7ceba0629f055600a7240a67e8', class: {
+        return (h("div", { key: '6525405e4edafd9257be9887cca824a436b2807c', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: '1e842f21f2990b22820974147b22d859be010683', class: "sd-loading-container__backdrop" }), h("div", { key: '4a48bafd9882a22c210dd1b2ca45efc43cc0c8da', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '8eb7377230f0e8c9c482dfc9ca1313f323895d14', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'af2fc52b0740ee1d2cea55b688e5b4b77e80c7e3', class: "sd-loading-container__message" }, this.message)))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, h("div", { key: 'd5f1e1e3df8b704d4a5dabe8cf7b50cc07a2699a', class: "sd-loading-container__backdrop" }), h("div", { key: '40dce62049e04a997b982ab65b47a755b6e917c7', class: "sd-loading-container__content" }, h("sd-circle-progress", { key: '9cb7a1ed52433f2d0982ceef1a298b1367a99dd4', indeterminate: true, type: "inverse" }), this.message && (h("p", { key: 'bc581b692122ef5553e4e8eb99056b89257eb6d9', class: "sd-loading-container__message" }, this.message)))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

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

@@ -152,13 +152,13 @@ const SdPagination = class {
             '--sd-pagination-bg-selected': PAGINATION_COLORS.bgSelected,
             '--sd-pagination-item-width': `${this.buttonWidth}px`,
         };
-        return (h("div", { key: 'c1925f0f312cf5c18f08f158efb599e5b6f0d503', class: {
+        return (h("div", { key: '8a2219bbc3a17951ed66501e7246f230f0495e74', class: {
                 'sd-pagination': true,
                 'sd-pagination--simple': this.simple,
-            }, style: cssVars }, h("div", { key: '1f22be76697820bf455cea5476efa84a09d03c44', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+            }, style: cssVars }, h("div", { key: '7e9ddb98aff7506fc3b6053d84c1be211e3d1ff7', class: "sd-pagination__group sd-pagination__group--prev" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "sd-pagination__info" }, h("span", { class: "sd-pagination__current" }, this.currentPage), h("span", { class: "sd-pagination__divider" }, "/"), h("span", { class: "sd-pagination__last" }, this.lastPage))) : (h("div", { class: "sd-pagination__numbers" }, this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'sd-pagination__item': true,
                 'sd-pagination__item--selected': this.currentPage === n,
-            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: 'b85b00b637152d5071db0652b6682541fbfd6ab5', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n))))), h("div", { key: '937554ea8d3ae71da85e2c1f49d82c99658141f0', class: "sd-pagination__group sd-pagination__group--next" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();
@@ -213,9 +213,9 @@ const SdTbody = class {
         }
     }
     render() {
-        return (h(Host, { key: '1f9dba3a06233de0457c6fe7d2df39e0e406fb30', slot: `${this.tableId}-body` }, h("tbody", { key: '758d795512ff546ec23863a1b9a0940f5d0f445a', class: { tbody: true } }, [
+        return (h(Host, { key: 'ae49b4a7e18afd3d44d07e7da6c3663a6a043796', slot: `${this.tableId}-body` }, h("tbody", { key: '7275cf9214f6917c5437b8a72a06cde3ca48dc8c', class: { tbody: true } }, [
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
-            h("slot", { key: 'cd9755c4f082478b1e75a6efcf9b4e7a9a9767b4' }),
+            h("slot", { key: '6455be878c24df5371e094fbfe9687ddb992e0e6' }),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),
         ])));
     }
@@ -390,16 +390,16 @@ const SdThead = class {
             '--table-border-color': TABLE_BORDER.color,
             '--table-border-width': `${TABLE_BORDER.width}px`,
         };
-        return (h(Host, { key: '1e352d3996dc6cd60acd20c22c8c426edabaa9ea', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'd76dbdd5b03096197fe09d69c198ab3a5892106c', class: {
+        return (h(Host, { key: 'c25f6f9704c079d4cb93da7e65c8c15b6dedcb67', slot: `${this.tableId}-head`, style: headStyle }, h("thead", { key: 'd91019378caafa2ec32dfa838eaa4d1fe815fb0d', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'fb0c1f8ff93ddb8682b07e9b4f55eaf56b1be41a', class: "tr" }, this._selectable && (h("th", { key: 'a53b9771dbec3ef7f3888bf9fc9393c683356c50', class: {
+            } }, h("tr", { key: '84e581f5c564693d356f56525f57d6b1da211442', class: "tr" }, this._selectable && (h("th", { key: 'fb92e978229c32d560f46af4e90e0980c9c0a213', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '8dc233b34b68a5daca91a60364ec8faffeb4b21d', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'bfc496c2468f3f81c1db4ffe70584a9229bd3512', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '157f59b56a4ef2a8529318c8beaf6f59b91e12f0', value: this.getIsAllChecked(), disabled: safeRows.length === 0, onSdUpdate: (e) => this.handleSelectAll(e.detail) }), h("div", { key: 'b65e099ebe4940b26cc251961e66a375400f2379', class: "th__bar" }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -103,7 +103,7 @@ const SdPopup = class {
             ...DEFAULT_SUBMIT_BUTTON_PROPS,
             ...this.submitButtonProps,
         };
-        return (h("div", { key: 'a978706454e3964818cc96b3a583880b952c2533', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: '1164fc29d4040d51b74ebc45fedc4fd19038e900', class: "sd-popup__header" }, h("h2", { key: '6ac1ea61e52f952f3bea4c4149222b4ff43b61db', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'fe8cebfc5ea513ae07e3a2987a8c7d9b36ed26e9', class: "sd-popup__body" }, h("slot", { key: 'f7ce06ae60cc8af6dbae2b24db4fd6b00e13d365' })), this.useFooter && (h("footer", { key: '84251ae1e48522fcf47d0081c9c0689e5fb236a6', class: "sd-popup__footer" }, h("div", { key: 'c7d4a8546bd185c812a98569cc3b2a818cbb2963', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '474e09481472b96ff4eacc66502aa06987b463b8', name: "footer-left" })), h("sd-button", { key: '2b23204ffad997f022dd06b772433ceb69950d04', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+        return (h("div", { key: 'fd14b75d27d3006978ceae9287486d9716bbbf5a', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'ac0222dc9512b99cd1d1b4684b9775cd462f39fa', class: "sd-popup__header" }, h("h2", { key: 'a11bea9fac5828161090d09d06d6e1c54c390392', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'ced8961a853cdf014d602c235cfc839a648fb19e', class: "sd-popup__body" }, h("slot", { key: '142807fd74e8b32a31ffb7ed8f3dfdcb07a6a1ba' })), this.useFooter && (h("footer", { key: '35a6b42e82ec13890b4fa56bda5b9781adeff229', class: "sd-popup__footer" }, h("div", { key: '44b2471e0f302bd001fdf1e1d72485dff4af094f', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: 'd1c8e29b60eb7ce86639e336c99a48a67437103a', name: "footer-left" })), h("sd-button", { key: '67b0a8530cae73e344cdae2ac0cb48fa3bdf4827', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
     }
 };
 SdPopup.style = sdPopupCss();

package/dist/esm/sd-select-list-item_2.entry.js

@@ -79,7 +79,7 @@ const SdSelectListItem = class {
         return (
         // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        h("div", { key: 'c964b0cf5b064c74a7e063be21350bca8124d77d', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
+        h("div", { key: '4322a04d65e4b2e1d82d0a6b09fdf6a57cce79ca', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -89,7 +89,7 @@ const SdSelectListItem = class {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '981e055f47aa512d18d61ae938b41942197f3088', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: 'ac34372d921afcb3eba0a51bed3dd70b4e8f1d0f', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: '47ae4bbe3c2fd960dcee0f1157ae8003dc45f205', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), isHtmlLabel(this.option.label) ? (h("span", { class: "sd-select-list-item__label", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.option.label)) })) : (h("span", { class: "sd-select-list-item__label" }, this.option.label)), this.countInfo && (h("span", { key: 'c89ba1e3ef52a1809d1252aaee5a18c40ff7cd61', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
 };
 SdSelectListItem.style = sdSelectListItemCss();
@@ -142,15 +142,15 @@ const SdSelectListItemSearch = class {
             clearTimeout(this.debounceTimer);
     }
     render() {
-        return (h("div", { key: '6250cee5611a36f6c5fb317d7d24abeae1ed142f', class: {
+        return (h("div", { key: '94215143f5e47887943c726147739cdb1a9fcbf7', class: {
                 'sd-select-list-item-search': true,
                 'sd-select-list-item-search--scrolled': this.isScrolled,
-            } }, h("div", { key: 'fa48adb1406c8922b61083a19cc270f02ddab100', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: '868519f09dc11fc4e9bde7a1148ce5ce666dd851', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'ff946fa2f360cd21eb785d13cb91e23f18abe05c', ref: el => {
+            } }, h("div", { key: '0ff422b93d0e15f2425ef760706ae0e6e2cb79f6', class: "sd-select-list-item-search__inner" }, h("sd-icon", { key: 'cc3468339c8b76103b67182309fa3aa2baf24380', name: "search", size: 16, color: "grey_70", class: "sd-select-list-item-search__icon" }), h("input", { key: 'acc468ede845d0f5890c7908311443ea2aa156cf', ref: el => {
                 this.inputEl = el;
-            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'e70e4c0af6e11f89d2893ae5bb28887a0ed8a5ee', type: "button", class: {
+            }, type: "text", class: "sd-select-list-item-search__input", placeholder: "\uAC80\uC0C9\uC5B4 \uC785\uB825", value: this.searchText, onInput: this.handleInput, onFocus: () => this.searchFocus.emit() }), h("button", { key: 'b1f1539aea4eb76458794dcb041e53c7af7b91e2', type: "button", class: {
                 'sd-select-list-item-search__clear': true,
                 'sd-select-list-item-search__clear--hidden': this.searchText === '',
-            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: '57b4af6446a565b6e1e95153e8553b1c3c363a33', name: "close", size: 12, color: "#888888" })))));
+            }, onClick: this.handleClear, tabindex: this.searchText !== '' ? 0 : -1, "aria-hidden": this.searchText !== '' ? 'false' : 'true' }, h("sd-icon", { key: 'a137986e0c801a6cf95e279edeb6a9b21cf00170', name: "close", size: 12, color: "#888888" })))));
     }
 };
 SdSelectListItemSearch.style = sdSelectListItemSearchCss();

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

@@ -265,15 +265,15 @@ const SdSelect = class {
                 this.closeDropdown();
             },
         };
-        return (h("sd-field", { key: 'fced3680a535c60d5750908acf1226426e12182b', 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, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
+        return (h("sd-field", { key: 'f95dc4008dd1f252f8cb41637aa817bdd4d72ba0', 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, focused: this.focused, hovered: this.hovered, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, onMouseEnter: () => {
                 this.hovered = true;
             }, onMouseLeave: () => {
                 this.hovered = false;
-            } }, h("div", { key: '38d53e92c022affd40bfc7951bbcdf7e02071446', class: "sd-select", ref: el => {
+            } }, h("div", { key: 'f12b88dc846a01fc2076242623ac1376ebc0105c', class: "sd-select", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-select-trigger", { key: '9cd9bdb89db37204f9a5c312d26277da772b1209', ref: el => {
+            } }, h("sd-select-trigger", { key: '8cef3403ca0a0430c3ce9f8255c98f0e28142d80', ref: el => {
                 this.triggerComponentRef = el;
-            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '8666dc885f3dcbae13011fd312eb72b7e6c906d9', ...portalProps }, h("sd-select-listbox", { key: '04e6dba3d2837cbef68ded80bd2f89c5bbe9dc01', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
+            }, displayText: this.displayText, placeholder: this.placeholder ?? '선택', disabled: this.disabled, isOpen: this.isOpen, onSdTriggerClick: this.handleTriggerClick, onSdTriggerFocus: this.handleTriggerFocus, onSdTriggerBlur: this.handleTriggerBlur })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '417194938ff7aac0b22abbba621342dbe767b146', ...portalProps }, h("sd-select-listbox", { key: '0c311407fdc72f37fa7dddf48fdfbaab668a18f4', type: this.type, options: this.options, value: this.value, emitValue: this.emitValue, useSearch: this.useSearch, useSelectAll: this.useSelectAll, triggerWidth: this.dropdownWidth || this.triggerWidth, maxWidth: this.resolvedMaxDropdownWidth, maxHeight: this.resolvedDropdownHeight, onSdOptionSelect: event => this.handleOptionSelect(event.detail) })))));
     }
     static get watchers() { return {
         "isOpen": [{
@@ -640,9 +640,9 @@ const SdSelectListbox = class {
             '--listbox-max-height': this.maxHeight ?? '260px',
             '--listbox-radius': `${LIST_BOX_LAYOUT.radius}px`,
         };
-        return (h("div", { key: 'fe30af2954ea5669f2071698e6ef9e2b26244d9b', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'aa7ce87d8c0c7163921445325121562603edd960', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: 'e8b5b3f73653ddc5096101f7109d427de1efa93a', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
+        return (h("div", { key: '77f3df8e7105f08340cf46ee0ce146d48b927228', class: "sd-select-listbox", style: cssVars }, this.showSearch && (h("sd-select-list-item-search", { key: 'bd79903b4799e6a074895e0ea2b0987a4775a8e0', isScrolled: this.isScrolled, onSdSearchFilter: this.handleSearchFilter })), h("div", { key: '08c5e0a70837025d62b08d85b0f5044b826dc133', class: "sd-select-listbox__list", onScroll: this.handleScroll, ref: el => {
                 this.listEl = el;
-            } }, this.showSelectAll && (h("sd-select-list-item", { key: '7fbde730eca0b8234475b714ea38a4393425410e', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
+            } }, this.showSelectAll && (h("sd-select-list-item", { key: '918c481cc05f4839d6a133e68a90c68ddfac5fba', option: SdSelectListbox.SELECT_ALL_OPTION, depth: 1, isSelected: this.selectAllState, isFocused: this.isOptionFocused(SdSelectListbox.SELECT_ALL_OPTION), useCheckbox: true, onSdListItemClick: this.handleSelectAllClick, onMouseEnter: () => this.handleOptionHover(SdSelectListbox.SELECT_ALL_OPTION) })), this.isEmpty ? (h("div", { class: "sd-select-listbox__empty" }, EMPTY_MESSAGE)) : this.isDepth ? (this.renderOptions(this.filteredOptions)) : (this.filteredOptions.map(option => (h("sd-select-list-item", { option: option, depth: 1, isSelected: this.isOptionSelected(option), isFocused: this.isOptionFocused(option), useCheckbox: this.isMulti, onSdListItemClick: this.handleOptionClick, onMouseEnter: () => this.handleOptionHover(option) })))))));
     }
     static get watchers() { return {
         "searchKeyword": [{
@@ -702,7 +702,7 @@ const SdSelectTrigger = class {
                 ? SELECT_COLORS.icon.disabled
                 : SELECT_COLORS.icon.default,
         };
-        return (h("div", { key: '0a929b8c0d68e25a64c352b5ea93b2e9c5f52611', ref: el => {
+        return (h("div", { key: '361344e040569fa6f7c2b5d16762d9b2120ca50e', ref: el => {
                 this.triggerEl = el;
             }, role: "button", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', tabindex: this.disabled ? -1 : 0, class: {
                 'sd-select-trigger': true,
@@ -713,7 +713,7 @@ const SdSelectTrigger = class {
                     e.preventDefault();
                     this.handleClick();
                 }
-            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'd8c91e392604c462aa9228147eb18c0b2ac13851', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '1afdcb944b30b675d4d2b31d6aeaa2ce41045d36', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
+            }, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '3ccbf7c188ca90dc8ba94f10ef2fa3f7cea70076', class: "sd-select-trigger__content" }, hasValue && isHtmlLabel(this.displayText) ? (h("span", { class: "sd-select-trigger__text", ref: el => el && (el.innerHTML = sanitizeInlineHtml(this.displayText)) })) : (h("span", { class: "sd-select-trigger__text" }, hasValue ? this.displayText : (this.placeholder ?? '선택'))), h("sd-icon", { key: '623f1f83d7b8c89e64f9ec8d8e3261bd771c45b4', name: "chevronDown", size: 12, color: "var(--trigger-icon-color)", class: {
                 'sd-select-trigger__icon': true,
                 'sd-select-trigger__icon--open': this.isOpen,
             } }))));

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

@@ -103,7 +103,7 @@ const SdSwitch = class {
             '--sd-switch-line-height': `${SWITCH_TYPOGRAPHY.lineHeight}px`,
             '--sd-switch-text-decoration': SWITCH_TYPOGRAPHY.textDecoration,
         };
-        return (h("label", { key: '8038810bfcf78ddea9ef73706689e19fdfe0b57f', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'ee4c60f379f20f56af01bafb0533e6b64bb3054a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: '8ce56df6d631b742331466ded340298a888576c7', class: "sd-switch__track" }, h("div", { key: 'e02c48a7af9e005524b5d3ba8689e99dd42555f2', class: "sd-switch__knob" })), this.label && h("span", { key: 'c1533c489ef8d0a2b8374d2eaeeb0ac743a9c507', class: "sd-switch__label" }, this.label)));
+        return (h("label", { key: '4746eeb0cd3b977be3bc537c30cbf58c51d3a8fc', "aria-label": this.label || 'switch', class: this.switchClasses, style: cssVars }, h("input", { key: 'f022803741f2ac787a8993a2d987eedc5d6c8f24', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), h("div", { key: 'd8684dcb2b446885f849e6f00d773ef340e37c73', class: "sd-switch__track" }, h("div", { key: '572bd3dd7f65c9a9fd36c27b4444b0e653ae2b23', class: "sd-switch__knob" })), this.label && h("span", { key: '5228763c541a4bc0a71bfb457a4432dca01d452f', class: "sd-switch__label" }, this.label)));
     }
 };
 SdSwitch.style = sdSwitchCss();