@sellmate/design-system 1.24.0 → 1.25.1

package/dist/design-system/{p-2fb9a5e6.entry.js → p-ad822c82.entry.js}

@@ -1 +1 @@
-import{r as t,c as e,a as i,h as s}from"./p-BZ5lcC25.js";var n={size:"16",icon:"12"},o={size:"24",icon:"16"},a={size:"28",icon:"20"},r={size:"36",icon:"24"},h={size:"62",icon:"32"},d={sm:"4",md:"6"},c={opacity:"5%"},l={disabled:"#BBBBBB"},g={content:"#888888",hover:{bg:"#222222"}},u={content:"#E30000",hover:{bg:"#E30000"}},b={content:"#025497",hover:{bg:"#0075FF"}},p={content:"#FFFFFF",disabled:"#E1E1E1",hover:{bg:"#FFFFFF"}};const f={xxs:{size:Number(n.size),icon:Number(n.icon)},xs:{size:Number(o.size),icon:Number(o.icon)},sm:{size:Number(a.size),icon:Number(a.icon)},md:{size:Number(r.size),icon:Number(r.icon)},lg:{size:Number(h.size),icon:Number(h.icon)}},m={xxs:Number(d.sm),xs:Number(d.sm),sm:Number(d.sm),md:Number(d.md),lg:Number(d.md)},x=c.opacity,v={default:g.content,danger:u.content,action:b.content,inverse:p.content},y={default:g.hover.bg,danger:u.hover.bg,action:b.hover.bg,inverse:p.hover.bg},F=l.disabled,z={default:F,danger:F,action:F,inverse:p.disabled},w=class{constructor(i){t(this,i),this.click=e(this,"sdClick",7)}icon;size="sm";intent="default";ariaLabel="";tooltipText;disabled=!1;get hostEl(){return i(this)}isTooltipOpen=!1;click;hasWarnedMissingAriaLabel=!1;componentWillLoad(){this.size??="sm",this.intent??="default",this.ariaLabel??=""}handleClick=t=>{this.disabled?t.preventDefault():this.click.emit(t)};handleMouseEnter=()=>{this.isTooltipOpen=!0};handleMouseLeave=()=>{this.isTooltipOpen=!1};handleFocus=()=>{this.isTooltipOpen=!0};handleBlur=()=>{this.isTooltipOpen=!1};componentWillRender(){this.warnIfMissingAriaLabel()}warnIfMissingAriaLabel(){""===(this.ariaLabel??"").trim()?this.hasWarnedMissingAriaLabel||(console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`),this.hasWarnedMissingAriaLabel=!0):this.hasWarnedMissingAriaLabel=!1}render(){const t=this.size??"sm",e=this.intent??"default",i=f[t]??f.sm,n=this.disabled?z[e]:v[e],o=(this.ariaLabel??"").trim()||void 0,a=(this.tooltipText??"").trim();return s("button",{key:"9d2d352d36c7c34c67d8c57de6236d72727bd078",class:{"sd-ghost-button":!0,"sd-ghost-button--disabled":this.disabled},type:"button","aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:void 0,"aria-label":o,style:{"--sd-ghost-button-size":`${i.size}px`,"--sd-ghost-button-radius":`${m[t]}px`,"--sd-ghost-button-hover-bg":y[e],"--sd-ghost-button-hover-opacity":x,"--sd-ghost-button-accent":"#0075FF"},onClick:this.handleClick,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onFocus:this.handleFocus,onBlur:this.handleBlur},a.length>0&&this.isTooltipOpen&&s("sd-portal",{key:"1a73fb53be28a622d03e4f20be0b30e0e76bccd4",parentRef:this.hostEl,open:!0,offset:[i.size/2,4],placement:"top"},s("div",{key:"e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe",class:"sd-ghost-button__tooltip-inner","aria-hidden":"true"},s("sd-tag",{key:"4aa1525a6da6ee72daf1815f1440d665bd1cf2c8",name:"square_xs_grey",label:a}))),s("sd-icon",{key:"4caac22d0d888c1998032697043e3a3761e012aa",name:this.icon,size:i.icon,color:n}))}};w.style='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%)}[data-align=right] .sd-ghost-button__tooltip-inner{transform:none}';const k=class{constructor(i){t(this,i),this.close=e(this,"sdClose",3)}get hostEl(){return i(this)}to="body";parentRef=null;offset=[0,4];viewportPadding=0;zIndex=996;open=!1;placement="bottom";close;container;wrapper;rafId;isInsideClick=!1;closeTransitionTimer;handleObservedScroll=()=>this.updatePosition();resizeObserver;mutationObserver;scrollParents=[];isObserved=!1;handleOpenChange(){this.syncPortalState()}componentDidLoad(){this.container=this.resolveContainer(),this.syncPortalState()}componentDidRender(){this.syncPortalState()}disconnectedCallback(){if(this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.unobserveParent(),this.wrapper?.parentNode)try{this.wrapper.parentNode.removeChild(this.wrapper)}catch{}}resolveContainer(){const t="string"==typeof this.to?document.querySelector(this.to):this.to;return t instanceof HTMLElement?t:document.body}resolveZIndex(){const t=this.zIndex??996,e=this.parentRef?.closest(".sd-modal-container__layer");if(!e)return t;const i=e.closest(".sd-modal-container"),s=i instanceof HTMLElement?parseInt(getComputedStyle(i).zIndex,10):NaN,n=Number.isFinite(s)?s:997;return Math.max(t,n+1)}createWrapper(){this.wrapper=document.createElement("div"),Object.assign(this.wrapper.style,{position:"fixed",top:"0",left:"0",zIndex:this.resolveZIndex().toString(),opacity:"0",transition:"opacity 0.15s ease-out",boxSizing:"border-box",visibility:"hidden"}),this.container.appendChild(this.wrapper)}ensureWrapper(){this.wrapper||(this.container||=this.resolveContainer(),this.createWrapper(),this.moveSlotContent())}syncPortalState(){if(!this.open)return this.wrapper&&(this.wrapper.style.transition="opacity 0.15s ease-out",this.wrapper.style.opacity="0",this.wrapper.style.pointerEvents="none",this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout((()=>{this.wrapper&&!this.open&&(this.wrapper.style.display="none")}),150)),void this.unobserveParent();this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.ensureWrapper(),this.wrapper&&(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(){this.wrapper&&Array.from(this.hostEl.childNodes).filter((t=>t.nodeType!==Node.COMMENT_NODE)).forEach((t=>this.wrapper.appendChild(t)))}updatePosition(){void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{if(!this.parentRef||!this.wrapper)return;const t=this.parentRef.getBoundingClientRect(),e=window.innerWidth,i=window.innerHeight,s=this.offset??[0,4],n=Math.max(0,this.viewportPadding??0),o=Math.max(e-2*n,0),a=Math.max(i-2*n,0);this.wrapper.style.maxWidth=`${o}px`,this.wrapper.style.maxHeight=`${a}px`;const r=this.wrapper.getBoundingClientRect(),h=i-t.bottom-s[1]-n,d=t.top-s[1]-n;let c,l=t.left+s[0];"top"===(this.placement??"bottom")?(c=t.top-r.height-s[1],d<r.height&&h>d&&(c=t.bottom+s[1])):(c=t.bottom+s[1],h<r.height&&d>h&&(c=t.top-r.height-s[1]));const g=i-n-r.height;c=g<n?n:Math.min(Math.max(c,n),g);const u=l+r.width>e-n,b=n,p=e-n-r.width;this.wrapper.style.top=`${c}px`,p<b?(this.wrapper.style.left=`${b}px`,this.wrapper.style.right="auto",delete this.wrapper.dataset.align):u?(this.wrapper.style.left="auto",this.wrapper.style.right=e-t.right+"px",this.wrapper.dataset.align="right"):(this.wrapper.style.right="auto",delete this.wrapper.dataset.align,l=Math.min(Math.max(l,b),p),this.wrapper.style.left=`${l}px`),this.wrapper.style.visibility="visible",this.wrapper.style.opacity="1"}))}observeParent(){this.parentRef&&!this.isObserved&&(this.observeScrollParents(this.parentRef),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updatePosition())),this.resizeObserver.observe(this.parentRef)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>this.updatePosition())),this.mutationObserver.observe(document.body,{childList:!0,subtree:!0})),this.isObserved=!0)}unobserveParent(){this.isObserved&&(this.unobserveScrollParents(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.isObserved=!1)}observeScrollParents(t){const e=this.getScrollParents(t);e.forEach((t=>{t.addEventListener("scroll",this.handleObservedScroll,{passive:!0})})),this.scrollParents=e}unobserveScrollParents(){this.scrollParents.forEach((t=>{t.removeEventListener("scroll",this.handleObservedScroll)})),this.scrollParents=[]}getScrollParents(t){const e=[];let i=t.parentElement;for(;i;){const{overflow:t,overflowX:s,overflowY:n}=getComputedStyle(i);[t,s,n].some((t=>/(auto|scroll|overlay)/.test(t)))&&e.push(i),i=i.parentElement}return e}isInsideTarget(t){return!(!this.wrapper?.contains(t)&&!this.parentRef?.contains(t))}handleMouseDown(t){this.isInsideClick=this.isInsideTarget(t.target)}handleWindowClick(t){this.isInsideClick?this.isInsideClick=!1:this.isInsideTarget(t.target)||this.close.emit()}render(){return s("slot",{key:"628b6a8231a1a7bf16206510374c066fdf8a8796"})}static get watchers(){return{open:[{handleOpenChange:0}]}}};var $={height:"20",paddingX:"8",gap:"4",typography:{fontSize:"11",fontWeight:"500",lineHeight:"18"},radius:"6"},E={height:"24",paddingX:"8",gap:"4",typography:{fontSize:"12",fontWeight:"700",lineHeight:"20"},radius:"6"},_={height:"28",paddingX:"12",gap:"6",typography:{fontSize:"14",fontWeight:"700",lineHeight:"24"},radius:"8"},N={content:"#FB4444",bg:"#FCEFEF"},C={content:"#FF6B00",bg:"#FEF1EA"},M={content:"#916C0D",bg:"#FFF7DD"},S={content:"#00973C",bg:"#E8F9EF"},O={content:"#0075FF",bg:"#E6F1FF"},L={content:"#006AC1",bg:"#EAF5FE"},W={content:"#004290",bg:"#EFF6FF"},B={content:"#737373",bg:"#EEEEEE"};const I=["xs","sm","md"],T=["grey","red","orange","yellow","green","blue","darkblue","indigo"],P={grey:{background:B.bg,content:B.content,icon:B.content},red:{background:N.bg,content:N.content,icon:N.content},orange:{background:C.bg,content:C.content,icon:C.content},yellow:{background:M.bg,content:M.content,icon:M.content},green:{background:S.bg,content:S.content,icon:S.content},blue:{background:O.bg,content:O.content,icon:O.content},darkblue:{background:L.bg,content:L.content,icon:L.content},indigo:{background:W.bg,content:W.content,icon:W.content}},j={xs:{height:`${$.height}px`,paddingX:`${$.paddingX}px`,gap:`${$.gap}px`,fontSize:`${$.typography.fontSize}px`,fontWeight:$.typography.fontWeight,lineHeight:`${$.typography.lineHeight}px`,iconSize:12,radius:`${$.radius}px`},sm:{height:`${E.height}px`,paddingX:`${E.paddingX}px`,gap:`${E.gap}px`,fontSize:`${E.typography.fontSize}px`,fontWeight:E.typography.fontWeight,lineHeight:`${E.typography.lineHeight}px`,iconSize:16,radius:`${E.radius}px`},md:{height:`${_.height}px`,paddingX:`${_.paddingX}px`,gap:`${_.gap}px`,fontSize:`${_.typography.fontSize}px`,fontWeight:_.typography.fontWeight,lineHeight:`${_.typography.lineHeight}px`,iconSize:16,radius:`${_.radius}px`}},A={xs:{...j.xs,radius:"999px"},sm:{...j.sm,radius:"999px"},md:{...j.md,radius:"999px"}},H=Object.fromEntries(["square","pill"].flatMap((t=>I.flatMap((e=>T.map((i=>[`${t}_${e}_${i}`,{shape:t,size:e,color:i,..."square"===t?j[e]:A[e],...P[i]}]))))))),X=class{constructor(e){t(this,e)}name="square_sm_grey";label="";icon;isLeft=!0;componentWillLoad(){this.name=this.name??"square_sm_grey"}get resolvedName(){if(!Object.prototype.hasOwnProperty.call(H,this.name))throw new Error(`Invalid sd-tag name: "${this.name}"`);return this.name}get resolvedConfig(){return H[this.resolvedName]}renderIcon(t,e){return null==this.icon?null:s("sd-icon",{class:"sd-tag__icon",name:this.icon,size:e,color:t})}render(){const t=this.resolvedConfig,e=this.renderIcon(t.icon,t.iconSize);return s("span",{key:"6cbf6fb37f0e926e604b24d482c8d648079b41dd",class:"sd-tag",style:{"--sd-tag-background":t.background,"--sd-tag-content":t.content,"--sd-tag-height":t.height,"--sd-tag-padding-x":t.paddingX,"--sd-tag-gap":t.gap,"--sd-tag-font-size":t.fontSize,"--sd-tag-font-weight":t.fontWeight,"--sd-tag-line-height":t.lineHeight,"--sd-tag-radius":t.radius},"aria-label":this.label||"tag"},this.icon&&this.isLeft&&e,s("span",{key:"e0e9410afe716341dc7fb7891bb46c85cde9d51b",class:"sd-tag__label"},this.label),this.icon&&!this.isLeft&&e)}};X.style="sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:var(--sd-tag-line-height, 20px)}";export{w as sd_ghost_button,k as sd_portal,X as sd_tag}
+import{r as t,c as e,a as i,h as s}from"./p-BZ5lcC25.js";var n={size:"16",icon:"12"},o={size:"24",icon:"16"},a={size:"28",icon:"20"},r={size:"36",icon:"24"},h={size:"62",icon:"32"},d={sm:"4",md:"6"},c={opacity:"5%"},l={disabled:"#BBBBBB"},g={content:"#888888",hover:{bg:"#222222"}},u={content:"#E30000",hover:{bg:"#E30000"}},b={content:"#025497",hover:{bg:"#0075FF"}},p={content:"#FFFFFF",disabled:"#E1E1E1",hover:{bg:"#FFFFFF"}};const f={xxs:{size:Number(n.size),icon:Number(n.icon)},xs:{size:Number(o.size),icon:Number(o.icon)},sm:{size:Number(a.size),icon:Number(a.icon)},md:{size:Number(r.size),icon:Number(r.icon)},lg:{size:Number(h.size),icon:Number(h.icon)}},m={xxs:Number(d.sm),xs:Number(d.sm),sm:Number(d.sm),md:Number(d.md),lg:Number(d.md)},x=c.opacity,v={default:g.content,danger:u.content,action:b.content,inverse:p.content},y={default:g.hover.bg,danger:u.hover.bg,action:b.hover.bg,inverse:p.hover.bg},F=l.disabled,z={default:F,danger:F,action:F,inverse:p.disabled},w=class{constructor(i){t(this,i),this.click=e(this,"sdClick",7)}icon;size="sm";intent="default";ariaLabel="";tooltipText;disabled=!1;get hostEl(){return i(this)}isTooltipOpen=!1;click;hasWarnedMissingAriaLabel=!1;componentWillLoad(){this.size??="sm",this.intent??="default",this.ariaLabel??=""}handleClick=t=>{this.disabled?t.preventDefault():this.click.emit(t)};handleMouseEnter=()=>{this.isTooltipOpen=!0};handleMouseLeave=()=>{this.isTooltipOpen=!1};handleFocus=()=>{this.isTooltipOpen=!0};handleBlur=()=>{this.isTooltipOpen=!1};componentWillRender(){this.warnIfMissingAriaLabel()}warnIfMissingAriaLabel(){""===(this.ariaLabel??"").trim()?this.hasWarnedMissingAriaLabel||(console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`),this.hasWarnedMissingAriaLabel=!0):this.hasWarnedMissingAriaLabel=!1}render(){const t=this.size??"sm",e=this.intent??"default",i=f[t]??f.sm,n=this.disabled?z[e]:v[e],o=(this.ariaLabel??"").trim()||void 0,a=(this.tooltipText??"").trim();return s("button",{key:"9d2d352d36c7c34c67d8c57de6236d72727bd078",class:{"sd-ghost-button":!0,"sd-ghost-button--disabled":this.disabled},type:"button","aria-disabled":this.disabled?"true":void 0,tabIndex:this.disabled?-1:void 0,"aria-label":o,style:{"--sd-ghost-button-size":`${i.size}px`,"--sd-ghost-button-radius":`${m[t]}px`,"--sd-ghost-button-hover-bg":y[e],"--sd-ghost-button-hover-opacity":x,"--sd-ghost-button-accent":"#0075FF"},onClick:this.handleClick,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onFocus:this.handleFocus,onBlur:this.handleBlur},a.length>0&&this.isTooltipOpen&&s("sd-portal",{key:"1a73fb53be28a622d03e4f20be0b30e0e76bccd4",parentRef:this.hostEl,open:!0,offset:[i.size/2,4],placement:"top"},s("div",{key:"e4a349dbfbf2fd16eed9a46f5e2ed43935212cfe",class:"sd-ghost-button__tooltip-inner","aria-hidden":"true"},s("sd-tag",{key:"4aa1525a6da6ee72daf1815f1440d665bd1cf2c8",name:"square_xs_grey",label:a}))),s("sd-icon",{key:"4caac22d0d888c1998032697043e3a3761e012aa",name:this.icon,size:i.icon,color:n}))}};w.style='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%)}[data-align=right] .sd-ghost-button__tooltip-inner{transform:none}';const k=class{constructor(i){t(this,i),this.close=e(this,"sdClose",3)}get hostEl(){return i(this)}to="body";parentRef=null;offset=[0,4];viewportPadding=0;zIndex=996;open=!1;placement="bottom";close;container;wrapper;rafId;isInsideClick=!1;closeTransitionTimer;handleObservedScroll=()=>this.updatePosition();resizeObserver;mutationObserver;scrollParents=[];isObserved=!1;handleOpenChange(){this.syncPortalState()}componentDidLoad(){this.container=this.resolveContainer(),this.syncPortalState()}componentDidRender(){this.syncPortalState()}disconnectedCallback(){if(this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.unobserveParent(),this.wrapper?.parentNode)try{this.wrapper.parentNode.removeChild(this.wrapper)}catch{}}resolveContainer(){const t="string"==typeof this.to?document.querySelector(this.to):this.to;return t instanceof HTMLElement?t:document.body}resolveZIndex(){const t=this.zIndex??996,e=this.parentRef?.closest(".sd-modal-container__layer");if(!e)return t;const i=e.closest(".sd-modal-container"),s=i instanceof HTMLElement?parseInt(getComputedStyle(i).zIndex,10):NaN,n=Number.isFinite(s)?s:997;return Math.max(t,n+1)}createWrapper(){this.wrapper=document.createElement("div"),Object.assign(this.wrapper.style,{position:"fixed",top:"0",left:"0",zIndex:this.resolveZIndex().toString(),opacity:"0",transition:"opacity 0.15s ease-out",boxSizing:"border-box",visibility:"hidden"}),this.container.appendChild(this.wrapper)}ensureWrapper(){this.wrapper||(this.container||=this.resolveContainer(),this.createWrapper(),this.moveSlotContent())}syncPortalState(){if(!this.open)return this.wrapper&&(this.wrapper.style.transition="opacity 0.15s ease-out",this.wrapper.style.opacity="0",this.wrapper.style.pointerEvents="none",this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout((()=>{this.wrapper&&!this.open&&(this.wrapper.style.display="none")}),150)),void this.unobserveParent();this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.ensureWrapper(),this.wrapper&&(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(){this.wrapper&&Array.from(this.hostEl.childNodes).filter((t=>t.nodeType!==Node.COMMENT_NODE)).forEach((t=>this.wrapper.appendChild(t)))}updatePosition(){void 0!==this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame((()=>{if(!this.parentRef||!this.wrapper)return;const t=this.parentRef.getBoundingClientRect(),e=window.innerWidth,i=window.innerHeight,s=this.offset??[0,4],n=Math.max(0,this.viewportPadding??0),o=Math.max(e-2*n,0),a=Math.max(i-2*n,0);this.wrapper.style.maxWidth=`${o}px`,this.wrapper.style.maxHeight=`${a}px`;const r=this.wrapper.getBoundingClientRect(),h=i-t.bottom-s[1]-n,d=t.top-s[1]-n;let c,l=t.left+s[0];"top"===(this.placement??"bottom")?(c=t.top-r.height-s[1],d<r.height&&h>d&&(c=t.bottom+s[1])):(c=t.bottom+s[1],h<r.height&&d>h&&(c=t.top-r.height-s[1]));const g=i-n-r.height;c=g<n?n:Math.min(Math.max(c,n),g);const u=l+r.width>e-n,b=n,p=e-n-r.width;this.wrapper.style.top=`${c}px`,p<b?(this.wrapper.style.left=`${b}px`,this.wrapper.style.right="auto",delete this.wrapper.dataset.align):u?(this.wrapper.style.left="auto",this.wrapper.style.right=e-t.right+"px",this.wrapper.dataset.align="right"):(this.wrapper.style.right="auto",delete this.wrapper.dataset.align,l=Math.min(Math.max(l,b),p),this.wrapper.style.left=`${l}px`),this.wrapper.style.visibility="visible",this.wrapper.style.opacity="1"}))}observeParent(){this.parentRef&&!this.isObserved&&(this.observeScrollParents(this.parentRef),"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updatePosition())),this.resizeObserver.observe(this.parentRef)),"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver((()=>this.updatePosition())),this.mutationObserver.observe(document.body,{childList:!0,subtree:!0})),this.isObserved=!0)}unobserveParent(){this.isObserved&&(this.unobserveScrollParents(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.isObserved=!1)}observeScrollParents(t){const e=this.getScrollParents(t);e.forEach((t=>{t.addEventListener("scroll",this.handleObservedScroll,{passive:!0})})),this.scrollParents=e}unobserveScrollParents(){this.scrollParents.forEach((t=>{t.removeEventListener("scroll",this.handleObservedScroll)})),this.scrollParents=[]}getScrollParents(t){const e=[];let i=t.parentElement;for(;i;){const{overflow:t,overflowX:s,overflowY:n}=getComputedStyle(i);[t,s,n].some((t=>/(auto|scroll|overlay)/.test(t)))&&e.push(i),i=i.parentElement}return e}isInsideTarget(t){return!(!this.wrapper?.contains(t)&&!this.parentRef?.contains(t))}handleMouseDown(t){this.open&&(this.isInsideClick=this.isInsideTarget(t.target))}handleWindowClick(t){this.open&&(this.isInsideClick?this.isInsideClick=!1:this.isInsideTarget(t.target)||this.close.emit())}render(){return s("slot",{key:"0b01050e7c1ab2b648bf1118aec27140ff1aed4c"})}static get watchers(){return{open:[{handleOpenChange:0}]}}};k.style=":host { display: none !important; }";var $={height:"20",paddingX:"8",gap:"4",typography:{fontSize:"11",fontWeight:"500",lineHeight:"18"},radius:"6"},E={height:"24",paddingX:"8",gap:"4",typography:{fontSize:"12",fontWeight:"700",lineHeight:"20"},radius:"6"},_={height:"28",paddingX:"12",gap:"6",typography:{fontSize:"14",fontWeight:"700",lineHeight:"24"},radius:"8"},N={content:"#FB4444",bg:"#FCEFEF"},C={content:"#FF6B00",bg:"#FEF1EA"},M={content:"#916C0D",bg:"#FFF7DD"},S={content:"#00973C",bg:"#E8F9EF"},O={content:"#0075FF",bg:"#E6F1FF"},L={content:"#006AC1",bg:"#EAF5FE"},W={content:"#004290",bg:"#EFF6FF"},B={content:"#737373",bg:"#EEEEEE"};const I=["xs","sm","md"],T=["grey","red","orange","yellow","green","blue","darkblue","indigo"],P={grey:{background:B.bg,content:B.content,icon:B.content},red:{background:N.bg,content:N.content,icon:N.content},orange:{background:C.bg,content:C.content,icon:C.content},yellow:{background:M.bg,content:M.content,icon:M.content},green:{background:S.bg,content:S.content,icon:S.content},blue:{background:O.bg,content:O.content,icon:O.content},darkblue:{background:L.bg,content:L.content,icon:L.content},indigo:{background:W.bg,content:W.content,icon:W.content}},j={xs:{height:`${$.height}px`,paddingX:`${$.paddingX}px`,gap:`${$.gap}px`,fontSize:`${$.typography.fontSize}px`,fontWeight:$.typography.fontWeight,lineHeight:`${$.typography.lineHeight}px`,iconSize:12,radius:`${$.radius}px`},sm:{height:`${E.height}px`,paddingX:`${E.paddingX}px`,gap:`${E.gap}px`,fontSize:`${E.typography.fontSize}px`,fontWeight:E.typography.fontWeight,lineHeight:`${E.typography.lineHeight}px`,iconSize:16,radius:`${E.radius}px`},md:{height:`${_.height}px`,paddingX:`${_.paddingX}px`,gap:`${_.gap}px`,fontSize:`${_.typography.fontSize}px`,fontWeight:_.typography.fontWeight,lineHeight:`${_.typography.lineHeight}px`,iconSize:16,radius:`${_.radius}px`}},A={xs:{...j.xs,radius:"999px"},sm:{...j.sm,radius:"999px"},md:{...j.md,radius:"999px"}},H=Object.fromEntries(["square","pill"].flatMap((t=>I.flatMap((e=>T.map((i=>[`${t}_${e}_${i}`,{shape:t,size:e,color:i,..."square"===t?j[e]:A[e],...P[i]}]))))))),X=class{constructor(e){t(this,e)}name="square_sm_grey";label="";icon;isLeft=!0;componentWillLoad(){this.name=this.name??"square_sm_grey"}get resolvedName(){if(!Object.prototype.hasOwnProperty.call(H,this.name))throw new Error(`Invalid sd-tag name: "${this.name}"`);return this.name}get resolvedConfig(){return H[this.resolvedName]}renderIcon(t,e){return null==this.icon?null:s("sd-icon",{class:"sd-tag__icon",name:this.icon,size:e,color:t})}render(){const t=this.resolvedConfig,e=this.renderIcon(t.icon,t.iconSize);return s("span",{key:"6cbf6fb37f0e926e604b24d482c8d648079b41dd",class:"sd-tag",style:{"--sd-tag-background":t.background,"--sd-tag-content":t.content,"--sd-tag-height":t.height,"--sd-tag-padding-x":t.paddingX,"--sd-tag-gap":t.gap,"--sd-tag-font-size":t.fontSize,"--sd-tag-font-weight":t.fontWeight,"--sd-tag-line-height":t.lineHeight,"--sd-tag-radius":t.radius},"aria-label":this.label||"tag"},this.icon&&this.isLeft&&e,s("span",{key:"e0e9410afe716341dc7fb7891bb46c85cde9d51b",class:"sd-tag__label"},this.label),this.icon&&!this.isLeft&&e)}};X.style="sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:var(--sd-tag-line-height, 20px)}";export{w as sd_ghost_button,k as sd_portal,X as sd_tag}

package/dist/design-system/p-c0198e3a.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as i,F as s,a as o,H as a}from"./p-BZ5lcC25.js";import{T as n}from"./p-sZMi_32I.js";import{a as r,r as h,e as l,c as d,f as c,g as p,h as g,i as b,T as f,j as u,b as y}from"./p-Cmg10jpN.js";import"./p-D6GUzecR.js";import"./p-BJfiMC9H.js";var v={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",fontSize:"12",fontWeight:"500",lineHeight:"20"},selected:{fontWeight:"700"}},x={bg:{hover:"#EEEEEE",selected:"#E6F1FF"},content:{default:"#555555",hover:"#004290",selected:"#004290"}};const _={height:`${"24"}px`,paddingX:`${"6"}px`,radius:`${"6"}px`,gap:`${"12"}px`,moveGap:`${{gap:"4"}.gap}px`,iconSize:Number("12")},w={fontFamily:v.default.fontFamily,fontSize:`${v.default.fontSize}px`,lineHeight:`${v.default.lineHeight}px`,fontWeightDefault:v.default.fontWeight,fontWeightSelected:v.selected.fontWeight},k={contentDefault:x.content.default,contentHover:x.content.hover,contentSelected:x.content.selected,bgHover:x.bg.hover,bgSelected:x.bg.selected,iconDefault:"#888888"},m=10,C={1:24,2:34,3:40,4:48,5:56},$=class{constructor(i){t(this,i),this.pageChange=e(this,"sdPageChange",7)}currentPage=1;lastPage=1;simple=!1;pageChange;get pageNumbers(){const t=Math.floor((this.currentPage-1)/m)*m+1,e=Math.min(t+m-1,this.lastPage);return Array.from({length:e-t+1},((e,i)=>t+i))}get buttonWidth(){const t=(this.pageNumbers.at(-1)??1).toString().length;return C[t]||C[1]}get isFirstGroup(){return this.currentPage<=m}get isLastGroup(){return Math.floor((this.currentPage-1)/m)*m+1+m-1>=this.lastPage}handlePageChange=t=>{t<1||t>this.lastPage||(this.currentPage=t,this.pageChange.emit(t))};handleGroupChange=t=>{const e=Math.min(Math.max(this.currentPage+("forward"===t?m:-10),1),this.lastPage);this.handlePageChange(e)};renderNavButton(t,e,s){return i("button",{type:"button",class:"sd-pagination__nav","aria-label":e,onClick:s},i("sd-icon",{name:t,size:_.iconSize,color:k.iconDefault}))}renderPrevButtons(){return this.simple?this.currentPage<=1?null:i(s,null,this.renderNavButton("chevronLeftEnd","Go to first page",(()=>this.handlePageChange(1))),this.renderNavButton("chevronLeft","Go to previous page",(()=>this.handlePageChange(this.currentPage-1)))):this.isFirstGroup?null:i(s,null,this.renderNavButton("chevronLeftEnd","Go to first page",(()=>this.handlePageChange(1))),this.renderNavButton("chevronLeft","Go to previous page group",(()=>this.handleGroupChange("backward"))))}renderNextButtons(){return this.simple?this.currentPage>=this.lastPage?null:i(s,null,this.renderNavButton("chevronRight","Go to next page",(()=>this.handlePageChange(this.currentPage+1))),this.renderNavButton("chevronRightEnd","Go to last page",(()=>this.handlePageChange(this.lastPage)))):this.isLastGroup?null:i(s,null,this.renderNavButton("chevronRight","Go to next page group",(()=>this.handleGroupChange("forward"))),this.renderNavButton("chevronRightEnd","Go to last page",(()=>this.handlePageChange(this.lastPage))))}render(){return i("div",{key:"5a1ebb6aeb6732cd3b6133cedba47aeedf620291",class:{"sd-pagination":!0,"sd-pagination--simple":this.simple},style:{"--sd-pagination-height":_.height,"--sd-pagination-padding-x":_.paddingX,"--sd-pagination-radius":_.radius,"--sd-pagination-gap":_.gap,"--sd-pagination-move-gap":_.moveGap,"--sd-pagination-font-family":w.fontFamily,"--sd-pagination-font-size":w.fontSize,"--sd-pagination-line-height":w.lineHeight,"--sd-pagination-font-weight-default":w.fontWeightDefault,"--sd-pagination-font-weight-selected":w.fontWeightSelected,"--sd-pagination-content":k.contentDefault,"--sd-pagination-content-hover":k.contentHover,"--sd-pagination-content-selected":k.contentSelected,"--sd-pagination-bg-hover":k.bgHover,"--sd-pagination-bg-selected":k.bgSelected,"--sd-pagination-item-width":`${this.buttonWidth}px`}},i("div",{key:"a4856d8ffde66402eae909ad9f636f3b13f1b5d7",class:"sd-pagination__group sd-pagination__group--prev"},this.renderPrevButtons()),this.simple?i("div",{class:"sd-pagination__info"},i("span",{class:"sd-pagination__current"},this.currentPage),i("span",{class:"sd-pagination__divider"},"/"),i("span",{class:"sd-pagination__last"},this.lastPage)):i("div",{class:"sd-pagination__numbers"},this.pageNumbers.map((t=>i("button",{type:"button","aria-current":this.currentPage===t?"page":void 0,class:{"sd-pagination__item":!0,"sd-pagination__item--selected":this.currentPage===t},onClick:()=>this.handlePageChange(t)},t)))),i("div",{key:"fd1d6d0ba1c143ca4f9692f1c604f0e0fc0730db",class:"sd-pagination__group sd-pagination__group--next"},this.renderNextButtons()))}};$.style="sd-pagination{display:inline-flex}.sd-pagination{display:inline-flex;align-items:center;gap:var(--sd-pagination-gap);font-family:var(--sd-pagination-font-family)}.sd-pagination__group{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);min-width:calc(var(--sd-pagination-height) * 2 + var(--sd-pagination-move-gap))}.sd-pagination__group--prev{justify-content:flex-end}.sd-pagination__group--next{justify-content:flex-start}.sd-pagination__numbers{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap)}.sd-pagination__nav{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-height);height:var(--sd-pagination-height);padding:0;background:transparent;border:0;border-radius:var(--sd-pagination-radius);cursor:pointer;outline:none}.sd-pagination__nav:hover{background-color:var(--sd-pagination-bg-hover)}.sd-pagination__item{display:inline-flex;align-items:center;justify-content:center;width:var(--sd-pagination-item-width);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);background:transparent;border:0;border-radius:var(--sd-pagination-radius);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height);cursor:pointer;outline:none;box-sizing:border-box}.sd-pagination__item:hover{background-color:var(--sd-pagination-bg-hover);color:var(--sd-pagination-content-hover)}.sd-pagination__item--selected{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}.sd-pagination__item--selected:hover{background-color:var(--sd-pagination-bg-selected);color:var(--sd-pagination-content-selected)}.sd-pagination__info{display:inline-flex;align-items:center;gap:var(--sd-pagination-move-gap);height:var(--sd-pagination-height);padding:0 var(--sd-pagination-padding-x);color:var(--sd-pagination-content);font-size:var(--sd-pagination-font-size);font-weight:var(--sd-pagination-font-weight-default);line-height:var(--sd-pagination-line-height)}.sd-pagination__current{color:var(--sd-pagination-content-selected);font-weight:var(--sd-pagination-font-weight-selected)}";const z=class{constructor(e){t(this,e)}get el(){return o(this)}rows=[];tableId="";topSpacerHeight=0;bottomSpacerHeight=0;tableEl=null;handleRowsChange(t){const e=t??[];this.tableEl?.setRowCountSync&&this.tableEl.setRowCountSync(e.length)}componentWillLoad(){this.syncTableContext(),this.rows=this.rows??[],this.tableEl?.setRowCountSync&&this.tableEl.setRowCountSync(this.rows.length),this.el.setSpacersSync=(t,e)=>{this.topSpacerHeight=t,this.bottomSpacerHeight=e}}componentDidLoad(){this.syncTableContext()}syncTableContext(){const t=this.el.closest("sd-table"),e=this.el.getRootNode(),i=e instanceof ShadowRoot?e.host:null,s=t??i;this.tableEl=s;const o=s?.getTableIdSync?.(),a=s?.getAttribute(n),r=(null!=o&&""!==o&&"undefined"!==o?o:null)??(null!=a&&""!==a&&"undefined"!==a?a:null)??"";""!==r&&r!==this.tableId&&(this.tableId=r)}render(){return i(a,{key:"af02c942fe83b515e2065840ff3b83ad22fd5542",slot:`${this.tableId}-body`},i("tbody",{key:"6f1b771c2a21ff087b5feb32b19e0fb4b0abed35",class:{tbody:!0}},[this.topSpacerHeight>0&&i("tr",{key:"spacer-top",class:"tbody__spacer",style:{height:`${this.topSpacerHeight}px`,display:"block"}}),i("slot",{key:"0c7c439b269527f9bfbb00bf60a1aec10646da56"}),this.bottomSpacerHeight>0&&i("tr",{key:"spacer-bottom",class:"tbody__spacer",style:{height:`${this.bottomSpacerHeight}px`,display:"block"}})]))}static get watchers(){return{rows:[{handleRowsChange:0}]}}};z.style=":host{display:contents}:host *{box-sizing:border-box}.tbody{display:table-row-group}";const S=class{constructor(i){t(this,i),this.sdColumnSort=e(this,"sdColumnSort",7)}get el(){return o(this)}columns;selectable;resizable;stickyColumn;stickyHeader;scrolledLeft;scrolledRight;rows=[];columnWidths=[];sdColumnSort;tableId="";_columns=[];_selectable=!1;_resizable=!1;_stickyColumn={left:0,right:0};_stickyHeader=!1;_scrolledLeft=!1;_scrolledRight=!1;dropdownOpenMap={};tableEl=null;dropdownRefs={};dropdownThRefs={};dropdownPortals={};handleColumnsChange(t){Array.isArray(t)&&0===(this.columnWidths??[]).length&&(this.columnWidths=t.map((t=>t.autoWidth?0:parseInt(t.width||"120",10))))}disconnectedCallback(){Object.values(this.dropdownPortals??{}).forEach((t=>{null!=t?.parentNode&&t.parentNode.removeChild(t)}))}componentWillLoad(){this.syncTableContext(),this.dropdownOpenMap=this.dropdownOpenMap??{},this.dropdownRefs=this.dropdownRefs??{},this.dropdownThRefs=this.dropdownThRefs??{},this.dropdownPortals=this.dropdownPortals??{},this.columnWidths=Array.isArray(this.columnWidths)?this.columnWidths:[],this.resolveConfig(),0===(this.columnWidths??[]).length&&(this.columnWidths=this._columns.map((t=>t.autoWidth?0:parseInt(t.width||"120",10))))}componentDidLoad(){this.syncTableContext(),this.resolveConfig(),this.initDropdownPortals()}initDropdownPortals(){const t=(this._columns??[]).filter((t=>!0===t.hasDropdown));if(0!==t.length)for(const e of t){const t=e.name;if(null!=(this.dropdownPortals??{})[t])continue;const i=this.el.querySelector(`[slot="dropdown-${t}"]`);if(null==i)continue;i.removeAttribute("slot");const s=document.createElement("sd-portal");s.parentRef=this.dropdownThRefs[t]??null,s.open=!1,s.style.display="none",s.addEventListener("sdClose",(()=>this.closeDropdown(t))),s.appendChild(i),document.body.appendChild(s),this.dropdownPortals[t]=s}}syncTableContext(){const t=this.el.closest("sd-table"),e=this.el.getRootNode(),i=e instanceof ShadowRoot?e.host:null,s=t??i;this.tableEl=s;const o=s?.getTableIdSync?.(),a=s?.getAttribute(n),r=(null!=o&&""!==o&&"undefined"!==o?o:null)??(null!=a&&""!==a&&"undefined"!==a?a:null)??"";""!==r&&r!==this.tableId&&(this.tableId=r)}resolveConfig(){const t=this.tableEl?.getConfigSync?.(),e=Array.isArray(this.columns)?this.columns:Array.isArray(t?.columns)?t.columns:[];this._columns=e,this._selectable=this.selectable??t?.selectable??!1,this._resizable=this.resizable??t?.resizable??!1,this._stickyColumn=this.stickyColumn??t?.stickyColumn??{left:0,right:0},this._stickyHeader=this.stickyHeader??t?.stickyHeader??!1,this._scrolledLeft=this.scrolledLeft??t?.scrolledLeft??!1,this._scrolledRight=this.scrolledRight??t?.scrolledRight??!1,Array.isArray(t?.columnWidths)&&0===(this.columnWidths??[]).length&&(this.columnWidths=[...t.columnWidths]),Array.isArray(this.columnWidths)||(this.columnWidths=[])}async refreshConfig(){this.resolveConfig(),this.initDropdownPortals()}async setColumnWidths(t){this.columnWidths=Array.isArray(t)?t:[]}async refreshSelection(){const t=this.el.querySelector("sd-checkbox");t&&(t.value=this.getIsAllChecked())}get visibleColumns(){return this._columns.filter((t=>!1!==t.visible))}getStickyStyle(t){if(this.tableEl?.getStickyStyleSync)return this.tableEl.getStickyStyleSync(t);const e=this.columnWidths.slice(0,t).reduce(((t,e)=>t+e),0)+(this._selectable?r:0),i=this.columnWidths.filter(((e,i)=>i>=this.visibleColumns.length-(this._stickyColumn.right||0)&&i>t)).reduce(((t,e)=>t+e),0),s=this.visibleColumns[t],o={"--sticky-left-offset":`${e}px`,"--sticky-right-offset":`${i}px`};return s?.autoWidth||(o.width=`${this.columnWidths[t]}px`,o.minWidth=`${this.columnWidths[t]}px`,o.maxWidth=`${this.columnWidths[t]}px`),o}handleResize(t,e,i=!1){this.tableEl?.handleResize&&this.tableEl.handleResize(t,e,i)}handleColumnSort=t=>{this.sdColumnSort.emit({column:t})};toggleDropdown(t){const e=!0!==this.dropdownOpenMap[t],i=this.dropdownPortals??{},s={...this.dropdownOpenMap};for(const o of(this._columns??[]).filter((t=>!0===t.hasDropdown))){const a=o.name===t&&e;s[o.name]=a;const n=i[o.name];null!=n&&(n.open=a)}this.dropdownOpenMap=s}closeDropdown(t){if(!0!==this.dropdownOpenMap[t])return;this.dropdownOpenMap={...this.dropdownOpenMap,[t]:!1};const e=(this.dropdownPortals??{})[t];null!=e&&(e.open=!1)}handleSelectAll(t){const e=!!t,i=Array.isArray(this.rows)?this.rows:[];this.tableEl?.toggleSelectAllSync&&this.tableEl.toggleSelectAllSync(e,i)}getIsAllChecked(){const t=Array.isArray(this.rows)?this.rows:[];return!!(this.tableEl?.getIsAllCheckedSync&&t.length>0)&&this.tableEl.getIsAllCheckedSync(t)}render(){const t=Array.isArray(this.rows)?this.rows:[],e=this.dropdownOpenMap??{},s=this.dropdownRefs??{},o=this._stickyColumn.left||0,n=this._stickyColumn.right||0,r=this.visibleColumns.slice(0,o),f=this.visibleColumns.slice(o,this.visibleColumns.length-n),u=this.visibleColumns.slice(this.visibleColumns.length-n),y=this.visibleColumns.length-1;return i(a,{key:"521fa63c751f74ba620aad7355127c7d7fe8217c",slot:`${this.tableId}-head`,style:{"--table-header-height":`${b.height}px`,"--table-header-padding-x":`${b.paddingX}px`,"--table-header-gap":`${b.gap}px`,"--table-header-bg":g.bg,"--table-header-font-family":p.fontFamily,"--table-header-font-weight":p.fontWeight,"--table-header-font-size":`${p.fontSize}px`,"--table-header-line-height":`${p.lineHeight}px`,"--table-header-text-decoration":p.textDecoration,"--table-header-resizer-color":c.color,"--table-header-resizer-height":`${c.height}px`,"--table-border-color":d.color,"--table-border-width":`${d.width}px`}},i("thead",{key:"226911deb4a0a0898e064875fbba7aa1d326634b",class:{thead:!0,"thead--sticky":this._stickyHeader}},i("tr",{key:"f60653ae5dc8b773b73ab05f9631358272e90df5",class:"tr"},this._selectable&&i("th",{key:"7826b9c1fa8ec84f83825f8380e7bcd014d3782a",class:{th:!0,"th--selected":!0,"sticky-left":!0,"sticky-left-edge":0===o,"is-scrolled-left":0===o&&this._scrolledLeft},style:{"--sticky-left-offset":"0px"}},i("sd-checkbox",{key:"412a9ee49954014dc45dd0a2444642a549782d8e",value:this.getIsAllChecked(),disabled:0===t.length,onSdUpdate:t=>this.handleSelectAll(t.detail)}),i("div",{key:"116b6c2a55cc7553090b39338e251101c1de057b",class:"th__bar"})),r.map(((t,a)=>i("th",{key:t.name,class:{th:!0,[`${t.thClass}`]:Boolean(t.thClass),"sticky-left":!0,"sticky-left-edge":a===o-1,"is-scrolled-left":a===o-1&&this._scrolledLeft,"th--has-dropdown":!0===t.hasDropdown},style:{...t.thStyle,...this.getStickyStyle(a)},ref:!0===t.hasDropdown?e=>{this.dropdownThRefs[t.name]=e}:void 0,onClick:!0===t.hasDropdown?()=>this.toggleDropdown(t.name):void 0},i("div",{class:`th__content th__content--${t.align||"left"}`},i("div",{class:"th__content--label"},t.label),t.icon&&i("sd-icon",{name:t.icon,size:"12",color:h(t.icon,t.iconColor)}),t.sort&&i("sd-icon",{name:l(t.sort),size:"12",color:h(l(t.sort),t.iconColor),onClick:e=>{e.stopPropagation(),this.handleColumnSort(t)},style:{cursor:"pointer"}}),t.tooltip&&i("sd-tooltip",{...t.tooltipOptions},i("div",{slot:"content"},t.tooltip.map((t=>i("p",null,t))))),!0===t.hasDropdown&&i("button",{class:{"th__dropdown-trigger":!0,"th__dropdown-trigger--open":!0===e[t.name]},ref:e=>{s[t.name]=e},"aria-haspopup":"listbox","aria-expanded":!0===e[t.name]?"true":"false"},i("sd-icon",{name:"caretDown",size:"12"}))),this._resizable&&a!==y&&i("div",{class:"th__resizer",onMouseDown:t=>this.handleResize(a,t)})))),f.map(((t,e)=>{const s=o+e;return i("th",{key:t.name,class:{th:!0,[`${t.thClass}`]:Boolean(t.thClass),"th--has-dropdown":!0===t.hasDropdown},style:{...t.thStyle,...this.getStickyStyle(s)},ref:!0===t.hasDropdown?e=>{this.dropdownThRefs[t.name]=e}:void 0,onClick:!0===t.hasDropdown?()=>this.toggleDropdown(t.name):void 0},i("div",{class:`th__content th__content--${t.align||"left"}`},i("div",{class:"th__content--label"},t.label),t.icon&&i("sd-icon",{name:t.icon,size:"12",color:h(t.icon,t.iconColor)}),t.sort&&i("sd-icon",{name:l(t.sort),size:"12",color:h(l(t.sort),t.iconColor),onClick:e=>{e.stopPropagation(),this.handleColumnSort(t)},style:{cursor:"pointer"}}),t.tooltip&&i("sd-tooltip",{...t.tooltipOptions},i("div",{slot:"content"},t.tooltip.map((t=>i("p",null,t))))),!0===t.hasDropdown&&i("button",{class:{"th__dropdown-trigger":!0,"th__dropdown-trigger--open":!0===this.dropdownOpenMap[t.name]},ref:e=>{this.dropdownRefs[t.name]=e},"aria-haspopup":"listbox","aria-expanded":!0===this.dropdownOpenMap[t.name]?"true":"false"},i("sd-icon",{name:"caretDown",size:"12"}))),this._resizable&&s!==y&&i("div",{class:"th__resizer",onMouseDown:t=>this.handleResize(s,t)}))})),u.map(((t,e)=>{const s=this.visibleColumns.length-n+e;return i("th",{key:t.name,class:{th:!0,[`${t.thClass}`]:Boolean(t.thClass),"sticky-right":!0,"sticky-right-edge":0===e,"is-scrolled-right":0===e&&this._scrolledRight,"th--has-dropdown":!0===t.hasDropdown},style:{...t.thStyle,...this.getStickyStyle(s)},ref:!0===t.hasDropdown?e=>{this.dropdownThRefs[t.name]=e}:void 0,onClick:!0===t.hasDropdown?()=>this.toggleDropdown(t.name):void 0},i("div",{class:`th__content th__content--${t.align||"left"}`},i("div",{class:"th__content--label"},t.label),t.icon&&i("sd-icon",{name:t.icon,size:"12",color:h(t.icon,t.iconColor)}),t.sort&&i("sd-icon",{name:l(t.sort),size:"12",color:h(l(t.sort),t.iconColor),onClick:e=>{e.stopPropagation(),this.handleColumnSort(t)},style:{cursor:"pointer"}}),t.tooltip&&i("sd-tooltip",{...t.tooltipOptions},i("div",{slot:"content"},t.tooltip.map((t=>i("p",null,t))))),!0===t.hasDropdown&&i("button",{class:{"th__dropdown-trigger":!0,"th__dropdown-trigger--open":!0===this.dropdownOpenMap[t.name]},ref:e=>{this.dropdownRefs[t.name]=e},"aria-haspopup":"listbox","aria-expanded":!0===this.dropdownOpenMap[t.name]?"true":"false"},i("sd-icon",{name:"caretDown",size:"12"}))),this._resizable&&i("div",{class:"th__resizer th__resizer--left",onMouseDown:t=>this.handleResize(s,t,!0)}))})))))}static get watchers(){return{columns:[{handleColumnsChange:0}]}}};S.style='sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th--has-dropdown{cursor:pointer}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}';const F=class{constructor(e){t(this,e)}get el(){return o(this)}columns;selectable;stickyColumn;rowKey="";row={};separator=null;tableId="";columnWidths=[];isVisible=!0;spansVersion=0;_columns=[];_selectable=!1;_stickyColumn={left:0,right:0};_scrolledLeft=!1;_scrolledRight=!1;_dense=!1;tableEl=null;componentWillLoad(){this.row=this.row??{},this.syncTableContext(),this.columnWidths=this.columnWidths??[],this.resolveConfig(),this.columnWidths=this._columns.map((t=>t.autoWidth?0:parseInt(t.width||"120",10))),this.updateVisibilitySync()}componentDidLoad(){this.syncTableContext()}syncTableContext(){const t=this.el.closest("sd-table"),e=this.el.getRootNode(),i=e instanceof ShadowRoot?e.host:null,s=t??i;this.tableEl=s;const o=s?.getTableIdSync?.(),a=s?.getAttribute(n),r=(null!=o&&""!==o&&"undefined"!==o?o:null)??(null!=a&&""!==a&&"undefined"!==a?a:null)??"";""!==r&&r!==this.tableId&&(this.tableId=r)}resolveConfig(){const t=this.tableEl?.getConfigSync?.();this._columns=this.columns??t?.columns??[],this._selectable=this.selectable??t?.selectable??!1,this._stickyColumn=this.stickyColumn??t?.stickyColumn??{left:0,right:0},this._scrolledLeft=t?.scrolledLeft??!1,this._scrolledRight=t?.scrolledRight??!1,this._dense=t?.dense??!1,t?.columnWidths&&0===(this.columnWidths??[]).length&&(this.columnWidths=[...t.columnWidths])}async refreshConfig(){this.resolveConfig()}async bumpSpansVersion(){this.spansVersion=this.spansVersion+1}async updateVisibility(){this.updateVisibilitySync()}updateVisibilitySync(){const t=parseInt(this.rowKey,10),e=this.tableEl?.getPaginationInfoSync?.();this.isVisible=!e||t>=e.startIndex&&t<e.endIndex}async setColumnWidths(t){this.columnWidths=t}async refreshSelection(){const t=this.el.querySelector("sd-checkbox");t&&(t.value=this.isSelected())}get visibleColumns(){return this._columns.filter((t=>!1!==t.visible))}formatValue(t){return null==t?"":"number"==typeof t?t.toLocaleString():String(t)}getCellValue(t){const{field:e,format:i,name:s}=t,o="function"==typeof e?e(this.row):""!==e?this.row[e]:this.row[s];return i?i(o,this.row):this.formatValue(o)}getStickyStyle(t){if(this.tableEl?.getStickyStyleSync)return this.tableEl.getStickyStyleSync(t);const e=this.columnWidths.slice(0,t).reduce(((t,e)=>t+e),0)+(this._selectable?52:0),i=this.columnWidths.filter(((e,i)=>i>=this.visibleColumns.length-(this._stickyColumn.right||0)&&i>t)).reduce(((t,e)=>t+e),0),s=this.visibleColumns[t],o={"--sticky-left-offset":`${e}px`,"--sticky-right-offset":`${i}px`};return s?.autoWidth||(o.width=`${this.columnWidths[t]}px`,o.minWidth=`${this.columnWidths[t]}px`,o.maxWidth=`${this.columnWidths[t]}px`),o}isSelected(){return!!this.tableEl?.isRowSelectedSync&&this.tableEl.isRowSelectedSync(this.row)}handleSelect(){this.tableEl?.updateRowSelectSync&&this.tableEl.updateRowSelectSync(this.row)}getSpanFor(t){if(this.tableEl?.getSpanSync)return this.tableEl.getSpanSync(this.rowKey,"string"==typeof t.field?t.field:t.name)}isCovered(t){return!!this.tableEl?.isCoveredSync&&this.tableEl.isCoveredSync(this.rowKey,t,this._columns)}getCellClassFor(t){if(this.tableEl?.getCellClassSync)return this.tableEl.getCellClassSync(this.rowKey,"string"==typeof t.field?t.field:t.name)}getFramePaddingStyle(t){if(this.tableEl?.isCellUseFrameSync?.(this.rowKey,t))return{padding:`${f.framePadding}px`}}expandCellClass(t){return null==t||""===t?{}:Object.fromEntries(t.split(/\s+/).filter(Boolean).map((t=>[t,!0])))}render(){const t=this._stickyColumn.left||0,e=this._stickyColumn.right||0,s=this.visibleColumns.slice(0,t),o=this.visibleColumns.slice(t,this.visibleColumns.length-e),n=this.visibleColumns.slice(this.visibleColumns.length-e),r=this.tableEl?.hasRowspanSync?.()??!1,h=this.tableEl?.hasUseFrameInRowSync?.(this.rowKey)??!1,l=this._dense&&!h?f.dense:f.default,c={display:this.isVisible?"":"none","--table-body-height":`${l.height}px`,"--table-body-padding-y":`${l.paddingY}px`,"--table-body-padding-x":`${f.paddingX}px`,"--table-body-font-family":y.fontFamily,"--table-body-font-weight":y.fontWeight,"--table-body-font-size":`${y.fontSize}px`,"--table-body-line-height":`${y.lineHeight}px`,"--table-body-text-decoration":y.textDecoration,"--table-border-color":d.color,"--table-border-width":`${d.width}px`,"--table-separator-color":u.color,"--table-separator-width":`${u.width}px`,"--table-separator-dense-width":`${u.denseWidth}px`};return i(a,{style:c},null!=this.separator?i("tr",{class:{tr:!0,"tr--separator":!0,"tr--separator--dense":4===this.separator}},i("td",{colSpan:this.visibleColumns.length+(this._selectable?1:0),class:"td td--separator"})):i("tr",{class:{tr:!0,"tr--no-hover":r}},this._selectable&&i("td",{class:{td:!0,"td--selected":!0,"sticky-left":!0,"sticky-left-edge":0===t,"is-scrolled-left":0===t&&this._scrolledLeft},style:{"--sticky-left-offset":"0px"}},i("sd-checkbox",{value:this.isSelected(),onSdUpdate:()=>this.handleSelect()})),s.map(((e,s)=>{if(this.isCovered(s))return null;const o="string"==typeof e.field?e.field:e.name,a=this.getSpanFor(e),n=this.getCellClassFor(e);return i("td",{key:e.name,rowSpan:a?.rowspan,colSpan:a?.colspan,class:{td:!0,[`td--${e.align||"left"}`]:!0,"sticky-left":!0,"sticky-left-edge":s===t-1,"is-scrolled-left":s===t-1&&this._scrolledLeft,[`${e.tdClass}`]:Boolean(e.tdClass),...this.expandCellClass(n)},style:{...this.getStickyStyle(s),...this.getFramePaddingStyle(o)}},i("slot",{name:`${this.tableId}-${o}-${this.rowKey}`},i("span",null,this.getCellValue(e))))})),o.map(((e,s)=>{const o=t+s;if(this.isCovered(o))return null;const a="string"==typeof e.field?e.field:e.name,n=this.getSpanFor(e),r=this.getCellClassFor(e);return i("td",{key:e.name,rowSpan:n?.rowspan,colSpan:n?.colspan,class:{td:!0,[`td--${e.align||"left"}`]:!0,[`${e.tdClass}`]:Boolean(e.tdClass),...this.expandCellClass(r)},style:{...this.getStickyStyle(o),...this.getFramePaddingStyle(a)}},i("slot",{name:`${this.tableId}-${a}-${this.rowKey}`},i("span",null,this.getCellValue(e))))})),n.map(((t,s)=>{const o=this.visibleColumns.length-e+s;if(this.isCovered(o))return null;const a="string"==typeof t.field?t.field:t.name,n=this.getSpanFor(t),r=this.getCellClassFor(t);return i("td",{key:t.name,rowSpan:n?.rowspan,colSpan:n?.colspan,class:{td:!0,[`td--${t.align||"left"}`]:!0,"sticky-right":!0,"sticky-right-edge":0===s,"is-scrolled-right":0===s&&this._scrolledRight,[`${t.tdClass}`]:Boolean(t.tdClass),...this.expandCellClass(r)},style:{...this.getStickyStyle(o),...this.getFramePaddingStyle(a)}},i("slot",{name:`${this.tableId}-${a}-${this.rowKey}`},i("span",null,this.getCellValue(t))))}))))}};F.style='sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.tr--no-hover:hover .td{background-color:white}.tr--separator:hover .td{background-color:var(--table-separator-color, #eeeeee)}.td{display:table-cell;height:var(--table-body-height, 44px);padding:var(--table-body-padding-y, 0) var(--table-body-padding-x, 16px);border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}.tr--no-hover:hover .td.sticky-left,.tr--no-hover:hover .td.sticky-right{background-color:white}.tr--separator:hover .td.sticky-left,.tr--separator:hover .td.sticky-right{background-color:var(--table-separator-color, #eeeeee)}.tr--separator .td--separator{height:var(--table-separator-width, 6px);padding:0;background-color:var(--table-separator-color, #eeeeee);border-bottom:none}.tr--separator--dense .td--separator{height:var(--table-separator-dense-width, 4px)}.td--divider-left{border-left:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}.td--divider-right{border-right:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1)}';export{$ as sd_pagination,z as sd_tbody,S as sd_thead,F as sd_tr}

package/dist/esm/sd-chip-input.entry.js

@@ -103,7 +103,7 @@ const CHIP_INPUT_SUGGESTIONS = {
     emptyLineHeight: '20px',
 };
 
-const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
+const sdChipInputCss = () => `sd-chip-input{display:inline-flex}sd-chip-input sd-portal{display:none}sd-chip-input .sd-chip-input{position:relative;width:100%;isolation:isolate;min-height:var(--sd-chip-input-min-height);display:flex;flex-flow:row wrap;align-items:center;gap:var(--sd-chip-input-chip-gap);padding:var(--sd-chip-input-padding-y) var(--sd-chip-input-padding-x);cursor:text}sd-chip-input .sd-chip-input__reset{display:inline-flex;align-items:center;gap:var(--sd-chip-input-reset-gap);flex-shrink:0}sd-chip-input .sd-chip-input__divider{display:inline-block;width:1px;height:12px;background-color:var(--sd-chip-input-divider-color);flex-shrink:0}sd-chip-input .sd-chip-input__max-count{font-size:var(--sd-chip-input-max-count-font-size);font-weight:var(--sd-chip-input-max-count-font-weight);color:var(--sd-chip-input-max-count-color);white-space:nowrap;flex-shrink:0}sd-chip-input .sd-chip-input__field{flex:0 0 auto;display:inline-grid;grid-template-columns:minmax(0, max-content);align-items:center;min-width:1ch;max-width:100%;height:var(--sd-chip-input-field-height);box-sizing:border-box;padding:0;border:none;border-radius:0;background:transparent;overflow:hidden}sd-chip-input .sd-chip-input__field::after{content:attr(data-value);grid-area:1/1;visibility:hidden;white-space:pre;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family)}sd-chip-input .sd-chip-input__field--filled{padding:0 var(--sd-chip-input-field-padding-x);border:var(--sd-chip-input-field-border-width) solid var(--sd-chip-input-field-border-color);border-radius:var(--sd-chip-input-field-radius);background:var(--sd-chip-input-field-bg)}sd-chip-input .sd-chip-input__field--empty{position:absolute;top:0;left:0;width:0;height:0;min-width:0;overflow:hidden}sd-chip-input .sd-chip-input__input{grid-area:1/1;width:100%;min-width:1ch;height:var(--sd-chip-input-field-height);margin:0;padding:0;border:none;outline:none;overflow:hidden;text-overflow:ellipsis;background:transparent;font-size:var(--sd-chip-input-field-font-size);line-height:var(--sd-chip-input-field-line-height);font-weight:var(--sd-chip-input-field-font-weight);font-family:var(--sd-chip-input-field-font-family);color:var(--sd-chip-input-field-content)}sd-chip-input .sd-chip-input__input[disabled]{cursor:not-allowed;pointer-events:none}sd-chip-input .sd-chip-input__input::placeholder{color:var(--sd-chip-input-placeholder-color)}sd-chip-input .sd-chip-input__suggestions{display:flex;flex-direction:column;box-sizing:border-box;background:white;border-radius:var(--sd-chip-input-suggestions-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);max-height:var(--sd-chip-input-suggestions-max-height);min-height:0;overflow-y:auto;overflow-x:hidden;outline:none}sd-chip-input .sd-chip-input__suggestion-item{display:flex;flex-shrink:0;align-items:center;gap:var(--sd-chip-input-suggestion-gap);padding:var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);font-size:var(--sd-chip-input-suggestion-font-size);line-height:var(--sd-chip-input-suggestion-line-height);font-weight:var(--sd-chip-input-suggestion-font-weight);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestion-color);cursor:pointer;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}sd-chip-input .sd-chip-input__suggestion-item--active{background:var(--sd-chip-input-suggestion-bg-hover);color:var(--sd-chip-input-suggestion-color-hover);font-weight:var(--sd-chip-input-suggestion-font-weight-selected)}sd-chip-input .sd-chip-input__suggestion-item--selected{cursor:default;overflow:visible;text-overflow:unset}sd-chip-input .sd-chip-input__suggestions-empty{padding:12px;text-align:center;font-size:var(--sd-chip-input-suggestions-empty-font-size);line-height:var(--sd-chip-input-suggestions-empty-line-height);font-family:var(--sd-chip-input-suggestion-font-family);color:var(--sd-chip-input-suggestions-empty-color)}`;
 
 const SdChipInput = class {
     constructor(hostRef) {
@@ -278,7 +278,6 @@ const SdChipInput = class {
         this.update.emit(next);
         this.inputEvent.emit('');
         this.inputEl?.focus();
-        this.suppressRecommendations = true;
     };
     handleChipRemove = (index) => {
         const next = this.internalValues.filter((_, i) => i !== index);
@@ -542,7 +541,7 @@ const SdChipInput = class {
             fontFamily: CHIP_INPUT_SUGGESTIONS.itemFontFamily,
             color: CHIP_INPUT_SUGGESTIONS.emptyColor,
         };
-        return (h("sd-field", { key: 'bab9babd5b7eca9dd7885bf58a6f024315a37083', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'c16e35b63fdf9f5c1927a5b9057d21f8b0e46139', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: '1332b6fad4f0b739c069f7bccd3dcbfc5c875f50', class: {
+        return (h("sd-field", { key: '5f654a66d1ba404b156c0fabcebd5006d033f67a', name: this.name, label: this.label, labelWidth: this.labelWidth, hint: this.hint, errorMessage: this.errorMessage, rules: [this.duplicateRule, ...(this.rules ?? [])], error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, width: this.width, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: 'c1b4648298f16f4d7ee5b4ef8b75da7ae380c70d', class: "sd-chip-input", ref: el => (this.chipInputRef = el), onClick: this.handleContainerClick }, (this.internalValues ?? []).map((value, i) => (h("sd-chip", { key: i, value: value, error: this.getChipError(i), disabled: this.getChipDisabled(i), editable: false, onSdRemove: () => this.handleChipRemove(i) }))), !isMaxReached && (h("div", { key: 'b838efe46b7b62be09c3ac5acc8c3d522d2859bf', class: {
                 'sd-chip-input__field': true,
                 'sd-chip-input__field--filled': this.inputValue !== '',
                 'sd-chip-input__field--empty': this.inputValue === '' && this.internalValues.length > 0 && !this.focused,
@@ -550,12 +549,12 @@ const SdChipInput = class {
                 ? this.inputValue
                 : this.internalValues.length === 0
                     ? this.placeholder
-                    : '' }, h("input", { key: '35f295a0a24099e20bd26bb1d2e3a185bd8c25d8', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
+                    : '' }, h("input", { key: '6d29024fd020e9a7e2ff2c68eb64aa6b1790f7c5', ref: el => (this.inputEl = el), class: "sd-chip-input__input", placeholder: this.internalValues.length === 0 ? this.placeholder : '', disabled: this.disabled, size: 1, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }))), showResetArea && (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        h("div", { key: 'b39992f79810a813ede76ce872ebe9c31519dbb4', class: "sd-chip-input__reset",
+        h("div", { key: 'e816bb2bab75cb2f2862913d3e18b4c8ea6e3d1b', class: "sd-chip-input__reset",
             // 리셋 버튼 클릭 시 input blur → portal unmount → refocus → 새 portal mount로
             // 두 wrapper가 body에 잠깐 겹치는 타이밍 이슈를 방지한다.
-            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: '937540ca5cc07803909bfc09292d585551be303d', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: 'a3f869713a596bbddaaccfcd5a4e9b4cdf1c46ea', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: '802b77a069e80168a71fa59a32e18fd2987a295c', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), showDropdown && (h("sd-portal", { key: '78a2efd9e4f499b8f6596895c713ca98db92f90c', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: 'c001a796c5a256507a558ca9f01839c70f19ad2b', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: 'b69431229b2deb89281b4520cacd585c04335c7d', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), showRecommendations ? (h("div", { style: {
+            onMouseDown: e => e.preventDefault() }, this.inputValue === '' && h("span", { key: '1c53892f50b7f7c3ce2bdb681dc745b5922bef48', class: "sd-chip-input__divider" }), this.maxCount != null && (h("span", { key: '07efa515dce065f89642966da96cb4c4b90d6da9', class: "sd-chip-input__max-count" }, "\uCD5C\uB300 ", this.maxCount, "\uAC1C")), this.useReset && this.internalValues.length > 0 && (h("sd-text-link", { key: 'a021bbe5ec6e0a74b58b758ec33088be7c2bbb00', icon: "reset", iconColor: CHIP_INPUT_RESET.iconColor, label: "\uC785\uB825 \uCD08\uAE30\uD654", underline: true, disabled: this.disabled, style: { '--sd-text-link-color': CHIP_INPUT_RESET.labelColor }, onSdClick: this.handleResetInput })))), h("sd-portal", { key: '3b6b9044053fca449a225d68125a25796e4b3e20', open: showDropdown, parentRef: this.chipInputRef ?? null, viewportPadding: SdChipInput.SUGGESTIONS_VIEWPORT_PADDING, onSdClose: this.closeSuggestions }, h("div", { key: '9095dc0dfb4755b430910f6b5c43196f0aa24501', class: "sd-chip-input__suggestions", role: "listbox", style: suggestionBoxStyle }, isDropdownLoading && (h("div", { key: '82aa5105a054a76ca3d8da78ef519bd8fc78f122', class: "sd-chip-input__suggestions-empty", style: suggestionEmptyStyle }, "\uBD88\uB7EC\uC624\uB294 \uC911...")), showRecommendations ? (h("div", { style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: '8px',
@@ -599,7 +598,7 @@ const SdChipInput = class {
                     if (!isSelected)
                         this.addChip(item);
                 } }, h("span", { style: { flex: '1' } }, item), isSelected && (h("sd-icon", { name: "check", size: "12", style: { color: '#0075FF', flexShrink: '0' } }))));
-        }))))))));
+        })))))));
     }
     static get watchers() { return {
         "values": [{

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

@@ -242,16 +242,13 @@ const SdField = class {
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '75f3be0dae03f292b66980b7c92d574bd0bda988', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '69b9827a2599a2e01fad26224b4b9800fde6e347', class: "sd-field__main", style: this.width !== '' && this.width !== 0
-                ? {
-                    width: typeof this.width === 'number' ? `${this.width}px` : this.width,
-                    flex: 'none',
-                }
-                : {} }, h("div", { key: 'ba0e98fd309c32ee73b2ba92f956358d51790f58', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, h("div", { key: '75f3be0dae03f292b66980b7c92d574bd0bda988', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '0c3bdc72f11481a94bdfef65ac1152c93403f926', class: "sd-field__main" }, h("div", { key: '707215e7087f8bfee3cf53f415caaaed2d37254d', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (h("div", { key: '8f941150147145368d340c4be0e3636ef67060c3', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: '78d5d092094c0f3e8562127d77821dadb2a21b6a', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: 'b494ab4550ae739096957cad46cb95a8c71f5a0b' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
+            }, style: this.width !== '' && this.width !== 0
+                ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
+                : {} }, addon && (h("div", { key: '4b96766a728f23d50effc7c4032b12e9fdb2f16d', class: "sd-field__addon" }, this.icon && (h("sd-icon", { key: 'f34105536690750f8b96d50e6a2b1c3c03a6b248', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), h("slot", { key: '3f7139b64e0f94ff29a3f27b03ae35b3fbfe0202' })), this.errorMsg !== '' || this.errorMessage !== '' ? (h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')

package/dist/esm/sd-ghost-button_3.entry.js

@@ -455,9 +455,13 @@ const SdPortal = class {
     }
     // 외부 클릭 감지
     handleMouseDown(e) {
+        if (!this.open)
+            return;
         this.isInsideClick = this.isInsideTarget(e.target);
     }
     handleWindowClick(e) {
+        if (!this.open)
+            return;
         if (this.isInsideClick) {
             this.isInsideClick = false;
             return;
@@ -467,7 +471,7 @@ const SdPortal = class {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '628b6a8231a1a7bf16206510374c066fdf8a8796' });
+        return h("slot", { key: '0b01050e7c1ab2b648bf1118aec27140ff1aed4c' });
     }
     static get watchers() { return {
         "open": [{
@@ -475,6 +479,7 @@ const SdPortal = class {
             }]
     }; }
 };
+SdPortal.style = `:host { display: none !important; }`;
 
 const tag = {
 	xs: {

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

@@ -232,7 +232,7 @@ const SdTbody = class {
 };
 SdTbody.style = sdTbodyCss();
 
-const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
+const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:var(--table-header-height, 36px)}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:var(--table-header-bg, #F5FAFF);height:var(--table-header-height, 36px);padding:0 var(--table-header-padding-x, 16px);font-family:var(--table-header-font-family, inherit);font-weight:var(--table-header-font-weight, 500);font-size:var(--table-header-font-size, 12px);line-height:var(--table-header-line-height, 20px);text-decoration:var(--table-header-text-decoration, none);vertical-align:middle;border-bottom:var(--table-border-width, 1px) solid var(--table-border-color, #E1E1E1);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:var(--table-selectable-width, 48px) !important;max-width:var(--table-selectable-width, 48px) !important;min-width:var(--table-selectable-width, 48px) !important;text-align:center}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:var(--table-header-bg, #F5FAFF);z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--table-header-gap, 4px)}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__bar{position:absolute;top:50%;right:0;transform:translateY(-50%);width:var(--table-border-width, 1px);height:var(--table-header-resizer-height, 16px);z-index:3;background-color:var(--table-header-resizer-color, #CCCCCC)}.th--has-dropdown{cursor:pointer}.th__dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;padding:0;border:none;background:transparent;cursor:pointer;color:inherit;border-radius:2px}.th__dropdown-trigger sd-icon{transition:transform 0.15s ease}.th__dropdown-trigger--open sd-icon{transform:rotate(180deg)}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:var(--table-header-resizer-height, 16px);cursor:col-resize;z-index:3;border-left:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC);border-right:var(--table-border-width, 1px) solid var(--table-header-resizer-color, #CCCCCC)}.th__resizer--left{right:auto;left:0}`;
 
 const SdThead = class {
     constructor(hostRef) {
@@ -493,21 +493,41 @@ const SdThead = class {
                 'sticky-left': true,
                 'sticky-left-edge': idx === stickyLeftCount - 1,
                 'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
+                'th--has-dropdown': col.hasDropdown === true,
+            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) }, ref: col.hasDropdown === true
+                ? el => {
+                    this.dropdownThRefs[col.name] = el;
+                }
+                : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
+                e.stopPropagation();
+                this.handleColumnSort(col);
+            }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
                 'th__dropdown-trigger': true,
                 'th__dropdown-trigger--open': dropdownOpenMap[col.name] === true,
-            }, ref: el => { dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
+            }, ref: el => {
+                dropdownRefs[col.name] = el;
+            }, "aria-haspopup": "listbox", "aria-expanded": dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && idx !== lastColIdx && (
         // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
             const actualColIdx = stickyLeftCount + relativeIdx;
             return (h("th", { key: col.name, class: {
-                    th: true,
+                    'th': true,
                     [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
+                    'th--has-dropdown': col.hasDropdown === true,
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
+                    ? el => {
+                        this.dropdownThRefs[col.name] = el;
+                    }
+                    : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
+                    e.stopPropagation();
+                    this.handleColumnSort(col);
+                }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
                     'th__dropdown-trigger': true,
                     'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
-                }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
+                }, ref: el => {
+                    this.dropdownRefs[col.name] = el;
+                }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && actualColIdx !== lastColIdx && (
             // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
@@ -519,10 +539,20 @@ const SdThead = class {
                     'sticky-right': true,
                     'sticky-right-edge': relativeIdx === 0,
                     'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true ? (el => { this.dropdownThRefs[col.name] = el; }) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: () => this.handleColumnSort(col), style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
+                    'th--has-dropdown': col.hasDropdown === true,
+                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) }, ref: col.hasDropdown === true
+                    ? el => {
+                        this.dropdownThRefs[col.name] = el;
+                    }
+                    : undefined, onClick: col.hasDropdown === true ? () => this.toggleDropdown(col.name) : undefined }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.icon && (h("sd-icon", { name: col.icon, size: "12", color: resolveTableIconColor(col.icon, col.iconColor) })), col.sort && (h("sd-icon", { name: resolveSortIconName(col.sort), size: "12", color: resolveTableIconColor(resolveSortIconName(col.sort), col.iconColor), onClick: (e) => {
+                    e.stopPropagation();
+                    this.handleColumnSort(col);
+                }, style: { cursor: 'pointer' } })), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text)))))), col.hasDropdown === true && (h("button", { class: {
                     'th__dropdown-trigger': true,
                     'th__dropdown-trigger--open': this.dropdownOpenMap[col.name] === true,
-                }, ref: el => { this.dropdownRefs[col.name] = el; }, onClick: () => this.toggleDropdown(col.name), "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "chevronDown", size: "12" })))), this._resizable && (
+                }, ref: el => {
+                    this.dropdownRefs[col.name] = el;
+                }, "aria-haspopup": "listbox", "aria-expanded": this.dropdownOpenMap[col.name] === true ? 'true' : 'false' }, h("sd-icon", { name: "caretDown", size: "12" })))), this._resizable && (
             // column resize 는 마우스 드래그 전용 인터랙션이라 키보드 핸들러를 두지 않는다.
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));