npm - @sellmate/design-system - Versions diffs - 0.0.12 → 0.0.13 - Mend

@sellmate/design-system 0.0.12 → 0.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

package/dist/components/sd-popover.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, F as Fragment } from './p-CLODAhOA.js';
 import { T as TooltipArrow } from './p-Bws0p2kF.js';
-import { d as defineCustomElement$4 } from './p-BO6LLSyN.js';
-import { d as defineCustomElement$3 } from './p-CI-1-u3u.js';
-import { d as defineCustomElement$2 } from './p-exVR_ekC.js';
+import { d as defineCustomElement$4 } from './p-tyC8W4sw.js';
+import { d as defineCustomElement$3 } from './p-DVFPBdfj.js';
+import { d as defineCustomElement$2 } from './p-D267VRcj.js';
 const sdPopoverCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}.sd-popover{position:relative;cursor:pointer;display:inline-block}";
@@ -44,11 +44,11 @@ const SdPopover$1 = /*@__PURE__*/ proxyCustomElement(class SdPopover extends H {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: 'e0e3b29b38cd9e74725d7eed7e42d64eb6e9e1f6' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: 'b19a77b871760484f3a89df50fdb3fd7451d5346', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '9776d4750b4b676d8464e2612ce200c18ca19418', class: {
+        return (h(Fragment, { key: 'e058418533929563a9ea1991823ec5bf2406e5f6' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (console.log('click popover'), (this.showPopover = !this.showPopover)) })), this.showPopover && (h("sd-tooltip-portal", { key: 'debecbef44714e705bf87bded2b7a85d016faba1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '26afb49bf9bc4c8227427a9fe93280e5435d20fc', class: {
                 'sd-popover-menu': true,
                 [`sd-popover-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '820cb08e906f5f0a03e495ceaa093239c0a06bfe', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '3e10009ce426c5699e474dad640baa0abbe62b3e' })), h("div", { key: 'cf2bd57e1fff8465e64caf92898ec784cb111eeb', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: 'b6270c6f37b6c7479adef1c1c02d090294b45096', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '0f519f8d73cb81db03daa269593a1313cef58727', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '598e1877f6239d069f237f8004cfc3a74504f1ef', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '3a3bd0400e096c18bf61f203e32adca3e508570f', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '8499cf3d5ee858eebd50fc2aa06595c0f2240cc0', name: "close", size: "12", color: "#AAAAAA" }))))))));
+            } }, h("i", { key: '52dd82b64d1d4ae5ec3741febb07ef553e50f42d', class: `sd-popover-menu__arrow sd-popover-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'e94ac6ea51e421546a813406d1821e6f3727e7bd' })), h("div", { key: '0abdb59077846308b2ccff14339eb193f8073433', class: "sd-popover-menu__content" }, this.menuTitle && h("div", { key: '9b0f289d9f7dbfb09c3e0a8b4162af97aef53e73', class: "sd-popover-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '6311f5e4a7ae9699d65d344f0b407b3715f2e072', class: "sd-popover-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '65b7ea1a67400b1887248a615fdb1ba93928e34a', class: `sd-popover-menu__buttons sd-popover-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '9032a6f6381cdf0b4bd3df689280aadb8357ffa6', class: "sd-popover-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '6ac75128090091c510065cb7317478722a35de7c', name: "close", size: "12", color: "#AAAAAA" }))))))));
     }
     static get watchers() { return {
         "show": ["watchShowHandler"]

package/dist/components/sd-portal.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { S as SdPortal$1, d as defineCustomElement$1 } from './p-D7VWdAch.js';
+import { S as SdPortal$1, d as defineCustomElement$1 } from './p-BqCRj-SM.js';
 const SdPortal = SdPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sd-select-multiple-group.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SdSelectMultipleGroup extends Components.SdSelectMultipleGroup, HTMLElement {}
+export const SdSelectMultipleGroup: {
+    prototype: SdSelectMultipleGroup;
+    new (): SdSelectMultipleGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sd-select-multiple-group.js ADDED Viewed

@@ -0,0 +1,389 @@
+import { p as proxyCustomElement, d as createEvent, h, c as Host } from './p-CLODAhOA.js';
+import { B as BaseDropdownEvent, S as SelectKeyboardNavigation } from './p-sQ8mybM7.js';
+import { d as defineCustomElement$6 } from './p-CuDrOaaO.js';
+import { d as defineCustomElement$5 } from './p-DVFPBdfj.js';
+import { d as defineCustomElement$4 } from './p-BBm_kUA7.js';
+import { d as defineCustomElement$3 } from './p-BqCRj-SM.js';
+import { d as defineCustomElement$2 } from './p-Cf4fh47I.js';
+const sdSelectMultipleGroupCss = "@font-face{font-family:\"Pretendard\";font-weight:800;font-display:swap;src:local(\"Pretendard-ExtraBold\"), url(\"./fonts/Pretendard-ExtraBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-ExtraBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:700;font-display:swap;src:local(\"Pretendard-Bold\"), url(\"./fonts/Pretendard-Bold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Bold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:600;font-display:swap;src:local(\"Pretendard-SemiBold\"), url(\"./fonts/Pretendard-SemiBold.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-SemiBold.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:500;font-display:swap;src:local(\"Pretendard-Medium\"), url(\"./fonts/Pretendard-Medium.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Medium.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:400;font-display:swap;src:local(\"Pretendard-Regular\"), url(\"./fonts/Pretendard-Regular.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Regular.ttf\") format(\"truetype\");}@font-face{font-family:\"Pretendard\";font-weight:300;font-display:swap;src:local(\"Pretendard-Light\"), url(\"./fonts/Pretendard-Light.subset.woff2\") format(\"font-woff2\"), url(\"./fonts/Pretendard-Light.ttf\") format(\"truetype\");}:root{--font-family-base:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}html{font-family:\"Pretendard\", -apple-system, BlinkMacSystemFont, system-ui, sans-serif}.bg-primary{background-color:var(--color-primary, #051d36)}.bg-secondary{background-color:var(--color-secondary, #555555)}.bg-accent{background-color:var(--color-accent, #9c27b0)}.bg-positive{background-color:var(--color-positive, #0075ff)}.bg-negative{background-color:var(--color-negative, #e30000)}.bg-info{background-color:var(--color-info, #00cd52)}.bg-warning{background-color:var(--color-warning, #f2c037)}.bg-red_99{background-color:var(--color-red_99, #220000)}.bg-red_95{background-color:var(--color-red_95, #440000)}.bg-red_90{background-color:var(--color-red_90, #5E0000)}.bg-red_85{background-color:var(--color-red_85, #820000)}.bg-red_80{background-color:var(--color-red_80, #AD0000)}.bg-red_75{background-color:var(--color-red_75, #E30000)}.bg-red_70{background-color:var(--color-red_70, #FB4444)}.bg-red_60{background-color:var(--color-red_60, #FF7C7C)}.bg-red_45{background-color:var(--color-red_45, #FFB5B5)}.bg-red_30{background-color:var(--color-red_30, #FFD3D3)}.bg-red_20{background-color:var(--color-red_20, #FCE6E6)}.bg-red_15{background-color:var(--color-red_15, #FCEFEF)}.bg-caution_bg{background-color:var(--color-caution_bg, #FEF1F1)}.bg-caution_icon{background-color:var(--color-caution_icon, #fd9595)}.bg-orange_99{background-color:var(--color-orange_99, #2F1100)}.bg-orange_95{background-color:var(--color-orange_95, #4D1B00)}.bg-orange_90{background-color:var(--color-orange_90, #752A00)}.bg-orange_85{background-color:var(--color-orange_85, #9B3700)}.bg-orange_75{background-color:var(--color-orange_75, #CE4900)}.bg-orange_65{background-color:var(--color-orange_65, #FF6B00)}.bg-orange_60{background-color:var(--color-orange_60, #FF7F22)}.bg-orange_55{background-color:var(--color-orange_55, #FFA452)}.bg-orange_45{background-color:var(--color-orange_45, #FFBC81)}.bg-orange_35{background-color:var(--color-orange_35, #FFD5AF)}.bg-orange_20{background-color:var(--color-orange_20, #FFEAD7)}.bg-orange_10{background-color:var(--color-orange_10, #FEF1EA)}.bg-header_alert{background-color:var(--color-header_alert, #FF7A00)}.bg-yellow_95{background-color:var(--color-yellow_95, #322700)}.bg-yellow_90{background-color:var(--color-yellow_90, #453702)}.bg-yellow_80{background-color:var(--color-yellow_80, #6C5602)}.bg-yellow_70{background-color:var(--color-yellow_70, #9C7A00)}.bg-yellow_60{background-color:var(--color-yellow_60, #C49900)}.bg-yellow_50{background-color:var(--color-yellow_50, #EBB800)}.bg-yellow_45{background-color:var(--color-yellow_45, #FFC700)}.bg-yellow_40{background-color:var(--color-yellow_40, #FFD643)}.bg-yellow_30{background-color:var(--color-yellow_30, #FEE17C)}.bg-yellow_25{background-color:var(--color-yellow_25, #FFE99E)}.bg-yellow_20{background-color:var(--color-yellow_20, #FEF1C4)}.bg-yellow_10{background-color:var(--color-yellow_10, #FFF7DD)}.bg-olive_95{background-color:var(--color-olive_95, #2C2C00)}.bg-olive_90{background-color:var(--color-olive_90, #454500)}.bg-olive_80{background-color:var(--color-olive_80, #636300)}.bg-olive_70{background-color:var(--color-olive_70, #838300)}.bg-olive_65{background-color:var(--color-olive_65, #A5A500)}.bg-olive_55{background-color:var(--color-olive_55, #C7C700)}.bg-olive_45{background-color:var(--color-olive_45, #DDDD12)}.bg-olive_30{background-color:var(--color-olive_30, #EEEE37)}.bg-olive_20{background-color:var(--color-olive_20, #F6F65F)}.bg-olive_15{background-color:var(--color-olive_15, #FAFAA1)}.bg-olive_10{background-color:var(--color-olive_10, #FBFBBF)}.bg-olive_05{background-color:var(--color-olive_05, #FEFED9)}.bg-green_99{background-color:var(--color-green_99, #001D0B)}.bg-green_95{background-color:var(--color-green_95, #003013)}.bg-green_90{background-color:var(--color-green_90, #00461C)}.bg-green_85{background-color:var(--color-green_85, #006629)}.bg-green_80{background-color:var(--color-green_80, #007B31)}.bg-green_75{background-color:var(--color-green_75, #00973C)}.bg-green_70{background-color:var(--color-green_70, #12B553)}.bg-green_65{background-color:var(--color-green_65, #2BCE6C)}.bg-green_55{background-color:var(--color-green_55, #6DE39C)}.bg-green_45{background-color:var(--color-green_45, #ACF4C9)}.bg-green_25{background-color:var(--color-green_25, #D4FAE3)}.bg-green_15{background-color:var(--color-green_15, #E8F9EF)}.bg-steelblue_99{background-color:var(--color-steelblue_99, #021a25)}.bg-steelblue_95{background-color:var(--color-steelblue_95, #02212f)}.bg-steelblue_90{background-color:var(--color-steelblue_90, #032d40)}.bg-steelblue_85{background-color:var(--color-steelblue_85, #033f59)}.bg-steelblue_80{background-color:var(--color-steelblue_80, #06587d)}.bg-steelblue_75{background-color:var(--color-steelblue_75, #066d9b)}.bg-steelblue_70{background-color:var(--color-steelblue_70, #128fc7)}.bg-steelblue_65{background-color:var(--color-steelblue_65, #229fd7)}.bg-steelblue_60{background-color:var(--color-steelblue_60, #50bff0)}.bg-steelblue_45{background-color:var(--color-steelblue_45, #a4e2fd)}.bg-steelblue_25{background-color:var(--color-steelblue_25, #d9f2fd)}.bg-steelblue_10{background-color:var(--color-steelblue_10, #ecf8fd)}.bg-oceanblue_99{background-color:var(--color-oceanblue_99, #011428)}.bg-oceanblue_95{background-color:var(--color-oceanblue_95, #03172d)}.bg-oceanblue_90{background-color:var(--color-oceanblue_90, #051d36)}.bg-oceanblue_85{background-color:var(--color-oceanblue_85, #07284a)}.bg-oceanblue_80{background-color:var(--color-oceanblue_80, #004177)}.bg-oceanblue_75{background-color:var(--color-oceanblue_75, #025497)}.bg-oceanblue_70{background-color:var(--color-oceanblue_70, #006ac1)}.bg-oceanblue_65{background-color:var(--color-oceanblue_65, #1f8ae1)}.bg-oceanblue_60{background-color:var(--color-oceanblue_60, #5cb0f3)}.bg-oceanblue_50{background-color:var(--color-oceanblue_50, #9cd1fc)}.bg-oceanblue_25{background-color:var(--color-oceanblue_25, #d5ebfe)}.bg-oceanblue_15{background-color:var(--color-oceanblue_15, #eaf5fe)}.bg-brilliantblue_99{background-color:var(--color-brilliantblue_99, #001226)}.bg-brilliantblue_95{background-color:var(--color-brilliantblue_95, #001b39)}.bg-brilliantblue_90{background-color:var(--color-brilliantblue_90, #002b5e)}.bg-brilliantblue_85{background-color:var(--color-brilliantblue_85, #004290)}.bg-brilliantblue_80{background-color:var(--color-brilliantblue_80, #005cc9)}.bg-brilliantblue_75{background-color:var(--color-brilliantblue_75, #0075ff)}.bg-brilliantblue_70{background-color:var(--color-brilliantblue_70, #2d8dff)}.bg-brilliantblue_60{background-color:var(--color-brilliantblue_60, #64abff)}.bg-brilliantblue_50{background-color:var(--color-brilliantblue_50, #93c4ff)}.bg-brilliantblue_40{background-color:var(--color-brilliantblue_40, #bbdaff)}.bg-brilliantblue_25{background-color:var(--color-brilliantblue_25, #d9eaff)}.bg-brilliantblue_20{background-color:var(--color-brilliantblue_20, #e6f1ff)}.bg-brilliantblue_10{background-color:var(--color-brilliantblue_10, #eff6ff)}.bg-brilliantblue_05{background-color:var(--color-brilliantblue_05, #f5faff)}.bg-grey_95{background-color:var(--color-grey_95, #222222)}.bg-grey_90{background-color:var(--color-grey_90, #333333)}.bg-grey_85{background-color:var(--color-grey_85, #444444)}.bg-grey_80{background-color:var(--color-grey_80, #555555)}.bg-grey_70{background-color:var(--color-grey_70, #737373)}.bg-grey_65{background-color:var(--color-grey_65, #888888)}.bg-grey_60{background-color:var(--color-grey_60, #999999)}.bg-grey_55{background-color:var(--color-grey_55, #aaaaaa)}.bg-grey_50{background-color:var(--color-grey_50, #bbbbbb)}.bg-grey_45{background-color:var(--color-grey_45, #cccccc)}.bg-grey_35{background-color:var(--color-grey_35, #D8D8D8)}.bg-grey_30{background-color:var(--color-grey_30, #e1e1e1)}.bg-grey_25{background-color:var(--color-grey_25, #E5E5E5)}.bg-grey_20{background-color:var(--color-grey_20, #eeeeee)}.bg-grey_10{background-color:var(--color-grey_10, #f6f6f6)}.bg-grey_05{background-color:var(--color-grey_05, #f9f9f9)}.bg-white{background-color:var(--color-white, #ffffff)}.bg-black{background-color:var(--color-black, #000000)}.text-primary{color:var(--color-primary, #051d36)}.text-secondary{color:var(--color-secondary, #555555)}.text-accent{color:var(--color-accent, #9c27b0)}.text-positive{color:var(--color-positive, #0075ff)}.text-negative{color:var(--color-negative, #e30000)}.text-info{color:var(--color-info, #00cd52)}.text-warning{color:var(--color-warning, #f2c037)}.text-red_99{color:var(--color-red_99, #220000)}.text-red_95{color:var(--color-red_95, #440000)}.text-red_90{color:var(--color-red_90, #5E0000)}.text-red_85{color:var(--color-red_85, #820000)}.text-red_80{color:var(--color-red_80, #AD0000)}.text-red_75{color:var(--color-red_75, #E30000)}.text-red_70{color:var(--color-red_70, #FB4444)}.text-red_60{color:var(--color-red_60, #FF7C7C)}.text-red_45{color:var(--color-red_45, #FFB5B5)}.text-red_30{color:var(--color-red_30, #FFD3D3)}.text-red_20{color:var(--color-red_20, #FCE6E6)}.text-red_15{color:var(--color-red_15, #FCEFEF)}.text-caution_bg{color:var(--color-caution_bg, #FEF1F1)}.text-caution_icon{color:var(--color-caution_icon, #fd9595)}.text-orange_99{color:var(--color-orange_99, #2F1100)}.text-orange_95{color:var(--color-orange_95, #4D1B00)}.text-orange_90{color:var(--color-orange_90, #752A00)}.text-orange_85{color:var(--color-orange_85, #9B3700)}.text-orange_75{color:var(--color-orange_75, #CE4900)}.text-orange_65{color:var(--color-orange_65, #FF6B00)}.text-orange_60{color:var(--color-orange_60, #FF7F22)}.text-orange_55{color:var(--color-orange_55, #FFA452)}.text-orange_45{color:var(--color-orange_45, #FFBC81)}.text-orange_35{color:var(--color-orange_35, #FFD5AF)}.text-orange_20{color:var(--color-orange_20, #FFEAD7)}.text-orange_10{color:var(--color-orange_10, #FEF1EA)}.text-header_alert{color:var(--color-header_alert, #FF7A00)}.text-yellow_95{color:var(--color-yellow_95, #322700)}.text-yellow_90{color:var(--color-yellow_90, #453702)}.text-yellow_80{color:var(--color-yellow_80, #6C5602)}.text-yellow_70{color:var(--color-yellow_70, #9C7A00)}.text-yellow_60{color:var(--color-yellow_60, #C49900)}.text-yellow_50{color:var(--color-yellow_50, #EBB800)}.text-yellow_45{color:var(--color-yellow_45, #FFC700)}.text-yellow_40{color:var(--color-yellow_40, #FFD643)}.text-yellow_30{color:var(--color-yellow_30, #FEE17C)}.text-yellow_25{color:var(--color-yellow_25, #FFE99E)}.text-yellow_20{color:var(--color-yellow_20, #FEF1C4)}.text-yellow_10{color:var(--color-yellow_10, #FFF7DD)}.text-olive_95{color:var(--color-olive_95, #2C2C00)}.text-olive_90{color:var(--color-olive_90, #454500)}.text-olive_80{color:var(--color-olive_80, #636300)}.text-olive_70{color:var(--color-olive_70, #838300)}.text-olive_65{color:var(--color-olive_65, #A5A500)}.text-olive_55{color:var(--color-olive_55, #C7C700)}.text-olive_45{color:var(--color-olive_45, #DDDD12)}.text-olive_30{color:var(--color-olive_30, #EEEE37)}.text-olive_20{color:var(--color-olive_20, #F6F65F)}.text-olive_15{color:var(--color-olive_15, #FAFAA1)}.text-olive_10{color:var(--color-olive_10, #FBFBBF)}.text-olive_05{color:var(--color-olive_05, #FEFED9)}.text-green_99{color:var(--color-green_99, #001D0B)}.text-green_95{color:var(--color-green_95, #003013)}.text-green_90{color:var(--color-green_90, #00461C)}.text-green_85{color:var(--color-green_85, #006629)}.text-green_80{color:var(--color-green_80, #007B31)}.text-green_75{color:var(--color-green_75, #00973C)}.text-green_70{color:var(--color-green_70, #12B553)}.text-green_65{color:var(--color-green_65, #2BCE6C)}.text-green_55{color:var(--color-green_55, #6DE39C)}.text-green_45{color:var(--color-green_45, #ACF4C9)}.text-green_25{color:var(--color-green_25, #D4FAE3)}.text-green_15{color:var(--color-green_15, #E8F9EF)}.text-steelblue_99{color:var(--color-steelblue_99, #021a25)}.text-steelblue_95{color:var(--color-steelblue_95, #02212f)}.text-steelblue_90{color:var(--color-steelblue_90, #032d40)}.text-steelblue_85{color:var(--color-steelblue_85, #033f59)}.text-steelblue_80{color:var(--color-steelblue_80, #06587d)}.text-steelblue_75{color:var(--color-steelblue_75, #066d9b)}.text-steelblue_70{color:var(--color-steelblue_70, #128fc7)}.text-steelblue_65{color:var(--color-steelblue_65, #229fd7)}.text-steelblue_60{color:var(--color-steelblue_60, #50bff0)}.text-steelblue_45{color:var(--color-steelblue_45, #a4e2fd)}.text-steelblue_25{color:var(--color-steelblue_25, #d9f2fd)}.text-steelblue_10{color:var(--color-steelblue_10, #ecf8fd)}.text-oceanblue_99{color:var(--color-oceanblue_99, #011428)}.text-oceanblue_95{color:var(--color-oceanblue_95, #03172d)}.text-oceanblue_90{color:var(--color-oceanblue_90, #051d36)}.text-oceanblue_85{color:var(--color-oceanblue_85, #07284a)}.text-oceanblue_80{color:var(--color-oceanblue_80, #004177)}.text-oceanblue_75{color:var(--color-oceanblue_75, #025497)}.text-oceanblue_70{color:var(--color-oceanblue_70, #006ac1)}.text-oceanblue_65{color:var(--color-oceanblue_65, #1f8ae1)}.text-oceanblue_60{color:var(--color-oceanblue_60, #5cb0f3)}.text-oceanblue_50{color:var(--color-oceanblue_50, #9cd1fc)}.text-oceanblue_25{color:var(--color-oceanblue_25, #d5ebfe)}.text-oceanblue_15{color:var(--color-oceanblue_15, #eaf5fe)}.text-brilliantblue_99{color:var(--color-brilliantblue_99, #001226)}.text-brilliantblue_95{color:var(--color-brilliantblue_95, #001b39)}.text-brilliantblue_90{color:var(--color-brilliantblue_90, #002b5e)}.text-brilliantblue_85{color:var(--color-brilliantblue_85, #004290)}.text-brilliantblue_80{color:var(--color-brilliantblue_80, #005cc9)}.text-brilliantblue_75{color:var(--color-brilliantblue_75, #0075ff)}.text-brilliantblue_70{color:var(--color-brilliantblue_70, #2d8dff)}.text-brilliantblue_60{color:var(--color-brilliantblue_60, #64abff)}.text-brilliantblue_50{color:var(--color-brilliantblue_50, #93c4ff)}.text-brilliantblue_40{color:var(--color-brilliantblue_40, #bbdaff)}.text-brilliantblue_25{color:var(--color-brilliantblue_25, #d9eaff)}.text-brilliantblue_20{color:var(--color-brilliantblue_20, #e6f1ff)}.text-brilliantblue_10{color:var(--color-brilliantblue_10, #eff6ff)}.text-brilliantblue_05{color:var(--color-brilliantblue_05, #f5faff)}.text-grey_95{color:var(--color-grey_95, #222222)}.text-grey_90{color:var(--color-grey_90, #333333)}.text-grey_85{color:var(--color-grey_85, #444444)}.text-grey_80{color:var(--color-grey_80, #555555)}.text-grey_70{color:var(--color-grey_70, #737373)}.text-grey_65{color:var(--color-grey_65, #888888)}.text-grey_60{color:var(--color-grey_60, #999999)}.text-grey_55{color:var(--color-grey_55, #aaaaaa)}.text-grey_50{color:var(--color-grey_50, #bbbbbb)}.text-grey_45{color:var(--color-grey_45, #cccccc)}.text-grey_35{color:var(--color-grey_35, #D8D8D8)}.text-grey_30{color:var(--color-grey_30, #e1e1e1)}.text-grey_25{color:var(--color-grey_25, #E5E5E5)}.text-grey_20{color:var(--color-grey_20, #eeeeee)}.text-grey_10{color:var(--color-grey_10, #f6f6f6)}.text-grey_05{color:var(--color-grey_05, #f9f9f9)}.text-white{color:var(--color-white, #ffffff)}.text-black{color:var(--color-black, #000000)}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-size:inherit}:target{scroll-margin-block:5ex}button{background:none;border:none;cursor:pointer;padding:0;outline:0}button:focus{outline:0 !important}.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb:hover{background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb:active{background:#e5e5e5}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;line-height:0}.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],textarea{padding-block:0px;padding-inline:0px}.sd-hoverable:hover>.sd-focus-helper{background:currentColor;opacity:0.15}.sd-hoverable:hover>.sd-focus-helper:before{opacity:0.1}.sd-hoverable:hover>.sd-focus-helper:after{opacity:0.4}.sd-focus-helper{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;opacity:0;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before,.sd-focus-helper:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;border-radius:inherit;transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1)}.sd-focus-helper:before{background:#000000}.sd-focus-helper:after{background:#ffffff}.sd-tooltip-menu{width:fit-content;padding:8px 16px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box;display:flex;align-items:start;justify-content:center;gap:12px}.sd-tooltip-menu--with-close{padding-right:12px !important}.sd-tooltip-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-tooltip-menu__arrow svg{width:100%;height:100%}.sd-tooltip-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-tooltip-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-tooltip-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-tooltip-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-tooltip-menu__content{line-height:20px;font-weight:500}.sd-tooltip-menu__close-button{padding-top:4px;display:flex}.sd-tooltip-menu__close-button button{padding:0;background:none;border:none;cursor:pointer}.sd-popover-menu{width:fit-content;padding:12px 20px;border-radius:4px;color:white;background:#07284a;font-size:12px;position:relative;box-sizing:border-box}.sd-popover-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-popover-menu__arrow svg{width:100%;height:100%}.sd-popover-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-popover-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-popover-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-popover-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-popover-menu__content{font-size:12px;line-height:20px}.sd-popover-menu__content .sd-popover-menu__title{font-weight:700;margin-bottom:4px}.sd-popover-menu__content .sd-popover-menu__messages{font-weight:500}.sd-popover-menu__content .sd-popover-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-popover-menu__content .sd-popover-menu__buttons--1{justify-content:flex-end}.sd-popover-menu__content .sd-popover-menu__buttons--2{justify-content:space-between}.sd-popover-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}:host{display:display;height:fit-content}.sd-select-multiple-group{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple-group:hover:not(.sd-select-multiple-group--disabled){background:#f6f6f6}.sd-select-multiple-group.sd-select-multiple-group--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__label{border-right:1px solid #cccccc}.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger{color:#888888}.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus,.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-visible,.sd-select-multiple-group.sd-select-multiple-group--disabled .sd-select-multiple-group__trigger:focus-within{outline:none !important}.sd-select-multiple-group__label{font-size:12px;font-weight:500;color:#333333;padding:4px 12px;border-right:1px solid #cccccc;border-radius:4px 0 0 4px;background-color:#f6f6f6}.sd-select-multiple-group__container{position:relative;width:100%;display:flex}.sd-select-multiple-group__container .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple-group__container .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple-group__container .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple-group__container .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px}.sd-select-multiple-group__dropdown .sd-select-multiple-group__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px}";
+const SdSelectMultipleGroup$1 = /*@__PURE__*/ proxyCustomElement(class SdSelectMultipleGroup extends BaseDropdownEvent {
+    constructor(registerHost) {
+        super(false);
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.sdChange = createEvent(this, "sdChange");
+        this.dropDownShow = createEvent(this, "dropDownShow");
+    }
+    get el() { return this; }
+    // props
+    value = null;
+    label = '';
+    options = [];
+    placeholder = '선택';
+    optionPlaceholder = '옵션이 없습니다.';
+    width = '200px';
+    dropdownHeight = '260px';
+    disabled = false;
+    clearable = false;
+    searchable = false;
+    useCheckbox = false;
+    // props - custom styles
+    containerStyle = {};
+    triggerStyle = {};
+    dropdownStyle = {};
+    optionStyle = {};
+    labelStyle = {};
+    // props - custom slots
+    optionRenderer;
+    // states
+    filteredOptions = this.options;
+    isOpen = false;
+    searchText = null;
+    itemIndex = -1;
+    isScrolled = false;
+    // events
+    sdChange;
+    dropDownShow;
+    selectRef;
+    searchRef;
+    optionRef;
+    dropdownRef;
+    valueChanged() {
+        this.sdChange?.emit(this.value);
+    }
+    optionsChanged() {
+        this.filteredOptions = this.options;
+        this.filterOptions();
+    }
+    searchTextChanged() {
+        this.filterOptions();
+    }
+    async itemIndexChanged(newIndex, oldIndex) {
+        if (this.searchable) {
+            const searchInput = await this.getNativeInputElement();
+            if (this.itemIndex === -1) {
+                searchInput?.focus();
+                return;
+            }
+            else if (searchInput?.matches(':focus')) {
+                searchInput?.blur();
+            }
+        }
+        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || []);
+        const currentItem = optionElements?.[this.itemIndex];
+        if (!currentItem || !this.isOpen)
+            return;
+        this.optionRef = currentItem;
+        const isOptionDisabled = await this.optionRef.isDisabled();
+        if (isOptionDisabled) {
+            newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;
+            return;
+        }
+        this.scrollToOption(currentItem);
+    }
+    async isOpenChanged() {
+        // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지
+        this.onDropdownToggle(this.isOpen);
+        const selectedOption = this.getSelectedOption();
+        if (!selectedOption) {
+            this.itemIndex = -1;
+        }
+        else {
+            this.itemIndex = this.options.indexOf(selectedOption[0]);
+        }
+        this.dropDownShow?.emit({ isOpen: this.isOpen });
+        if (this.isOpen === false)
+            return;
+        await new Promise(resolve => setTimeout(resolve, 10));
+        const optionElements = Array.from(this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || []);
+        const currentItem = optionElements?.[this.itemIndex];
+        // 드롭다운이 열릴 때 검색 입력에 포커스
+        if (this.searchable) {
+            const searchInput = await this.getNativeInputElement();
+            searchInput?.focus();
+        }
+        if (!currentItem)
+            return;
+        await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이
+        this.scrollToOption(currentItem);
+    }
+    connectedCallback() {
+        // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음
+        this.filteredOptions = this.options;
+        this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화
+    }
+    disconnectedCallback() {
+        this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리
+    }
+    handleDocumentClick(event) {
+        if (!this.selectRef?.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    handleDocumentKeydown(keyboardEvent) {
+        keyboardEvent.stopPropagation();
+        const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKey.includes(keyboardEvent.key))
+            return;
+        keyboardEvent.preventDefault();
+        switch (keyboardEvent.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);
+                const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);
+                this.itemIndex = nextIndex;
+                break;
+            case 'Enter':
+                const selectedOption = this.filteredOptions[this.itemIndex];
+                if (selectedOption && !selectedOption.disabled) {
+                    this.handleOptionSelection(selectedOption);
+                }
+                break;
+            case 'Escape':
+                this.isOpen = false;
+                break;
+        }
+    }
+    // event handlers
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isOpen = !this.isOpen;
+            this.dropDownShow?.emit({ isOpen: this.isOpen });
+        }
+    };
+    handleOptionClick = (detail) => {
+        const { option, event } = detail;
+        event.stopPropagation();
+        if (option.type === 'group')
+            this.handleGroupOptionClick(detail);
+        if (option.type === 'subgroup')
+            this.handleSubGroupOptionClick(detail);
+        if (option.type === 'item')
+            this.handleOptionSelection(option);
+    };
+    handleGroupOptionClick = (detail) => {
+        const { option, isSelected } = detail;
+        const childOptions = this.options.filter(opt => opt.parent === option.value && !opt.disabled);
+        childOptions.forEach(subgroup => {
+            this.handleSubGroupOptionClick({
+                option: subgroup,
+                isSelected: isSelected || isSelected === null,
+            });
+        });
+    };
+    handleSubGroupOptionClick = (detail) => {
+        const { option, isSelected } = detail;
+        const childOptions = this.options.filter(opt => opt.parent === option.value && !opt.disabled);
+        if (isSelected || isSelected === null) {
+            // 모든 자식 옵션이 선택된 경우, 모두 선택 해제
+            this.value =
+                this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||
+                    null;
+        }
+        else {
+            // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택
+            const newSelections = childOptions.filter(child => !this.value?.some(selected => selected.value === child.value));
+            this.value = [...(this.value || []), ...newSelections];
+        }
+    };
+    filterOptions() {
+        if (!this.searchText || this.searchText.trim() === '') {
+            // 검색어가 없으면 전체 옵션 표시
+            this.filteredOptions = this.options;
+        }
+        else {
+            // 검색어가 있으면 필터링
+            this.filteredOptions = this.options.filter(option => option.label.toLowerCase().includes(this.searchText.toLowerCase()));
+        }
+    }
+    getSelectedOption() {
+        return this.options.filter(option => this.value?.includes(option));
+    }
+    handleDropdownScroll = (event) => {
+        const target = event.target;
+        const scrollTop = target.scrollTop;
+        // 스크롤이 조금이라도 되면 그림자 표시
+        this.isScrolled = scrollTop > 0;
+    };
+    async getNativeInputElement() {
+        if (this.searchRef) {
+            return this.searchRef.getNativeElement();
+        }
+        return null;
+    }
+    handleOptionSelection = (option) => {
+        if (!option || option.disabled)
+            return;
+        const isAlreadySelected = this.value?.some(opt => opt.value === option.value);
+        if (isAlreadySelected) {
+            // 이미 선택된 옵션인 경우, 선택 해제
+            this.value = this.value?.filter(opt => opt.value !== option.value) || null;
+        }
+        else {
+            // 새로운 옵션 선택
+            this.value = [...(this.value || []), option];
+        }
+    };
+    isAllChildrenSelected(parentOption) {
+        const childOptions = this.options.filter(option => option.parent === parentOption.value);
+        const isChecked = childOptions.filter(child => this.value?.some(selected => selected.value === child.value));
+        if (isChecked.length === childOptions.length)
+            return true;
+        if (isChecked.length > 0)
+            return null;
+        return false;
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    scrollToOption(optionElement) {
+        if (!this.dropdownRef || !optionElement)
+            return;
+        const dropdown = this.dropdownRef;
+        const optionTop = optionElement.offsetTop;
+        const optionHeight = optionElement.offsetHeight;
+        const dropdownScrollTop = dropdown.scrollTop;
+        const dropdownHeight = dropdown.clientHeight;
+        const searchContainer = dropdown.querySelector('.sd-select__search-container');
+        const searchOffset = searchContainer ? searchContainer.offsetHeight : 0;
+        const visibleTop = dropdownScrollTop + searchOffset;
+        const visibleBottom = dropdownScrollTop + dropdownHeight;
+        if (optionTop < visibleTop) {
+            dropdown.scrollTop = optionTop - searchOffset;
+        }
+        else if (optionTop + optionHeight > visibleBottom) {
+            dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;
+        }
+    }
+    render() {
+        const style = {
+            '--select-width': this.width || '200px',
+            '--select-dropdown-height': this.dropdownHeight || '260px',
+        };
+        return (h(Host, { key: 'b2dd93262b0d07ca7991b9a9c4b4b643ece0132d', style: style }, h("div", { key: '02759e35f71bcc24242d55448218947232232c84', class: {
+                'sd-select-multiple-group': true,
+                'sd-select-multiple-group--open': this.isOpen,
+                'sd-select-multiple-group--disabled': this.disabled,
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), h("div", { key: 'de24276ab88ecad8e49d1766153c84366380cf68', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+    }
+    renderLabel(label, labelStyle) {
+        if (!label)
+            return null;
+        return (h("label", { class: "sd-select-multiple-group__label", style: labelStyle }, label));
+    }
+    renderTrigger() {
+        const selectedOption = this.getSelectedOption();
+        return (h("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, h("span", { class: "sd-select-multiple-group__value" }, !selectedOption
+            ? '선택'
+            : selectedOption.length
+                ? selectedOption.map(option => option.label).join(', ')
+                : this.placeholder), this.clearable && selectedOption?.length > 0 && !this.disabled && (h("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
+                event.stopPropagation();
+                this.value = null;
+            } })), h("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
+                'sd-select-multiple-group__arrow': true,
+                'sd-select-multiple-group__arrow--open': this.isOpen,
+            } })));
+    }
+    renderDropdown() {
+        if (this.isOpen === false)
+            return null;
+        return (h("sd-portal", { open: this.isOpen, parentRef: this.selectRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-select-multiple-group__dropdown", style: this.dropdownStyle, onScroll: this.handleDropdownScroll }, this.searchable && (h("div", { class: {
+                'sd-select-multiple-group__search-container': true,
+                'sd-select-multiple-group__search-container--scrolled': this.isScrolled,
+            }, onClick: event => event.stopPropagation() }, h("sd-input", { ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdInput: event => {
+                this.searchText = String(event?.detail);
+            }, onSdFocus: () => {
+                this.itemIndex = -1;
+            } }, h("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("slot", { name: `option-${option.value}` }, h("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
+                ? this.value?.some(selected => selected.value === option.value)
+                : this.isAllChildrenSelected(option), isFocused: index === this.itemIndex, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleOptionClick(detail), useCheckbox: this.useCheckbox }))))) : (h("slot", { name: "option-placeholder" }, h("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
+    }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "options": ["optionsChanged"],
+        "searchText": ["searchTextChanged"],
+        "itemIndex": ["itemIndexChanged"],
+        "isOpen": ["isOpenChanged"]
+    }; }
+    static get style() { return sdSelectMultipleGroupCss; }
+}, [772, "sd-select-multiple-group", {
+        "value": [1040],
+        "label": [1],
+        "options": [1040],
+        "placeholder": [1],
+        "optionPlaceholder": [1, "option-placeholder"],
+        "width": [1],
+        "dropdownHeight": [1, "dropdown-height"],
+        "disabled": [4],
+        "clearable": [4],
+        "searchable": [4],
+        "useCheckbox": [4, "use-checkbox"],
+        "containerStyle": [16],
+        "triggerStyle": [16],
+        "dropdownStyle": [16],
+        "optionStyle": [16],
+        "labelStyle": [16],
+        "optionRenderer": [16],
+        "filteredOptions": [32],
+        "isOpen": [32],
+        "searchText": [32],
+        "itemIndex": [32],
+        "isScrolled": [32]
+    }, undefined, {
+        "value": ["valueChanged"],
+        "options": ["optionsChanged"],
+        "searchText": ["searchTextChanged"],
+        "itemIndex": ["itemIndexChanged"],
+        "isOpen": ["isOpenChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-select-multiple-group", "sd-checkbox", "sd-icon", "sd-input", "sd-portal", "sd-select-option-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-select-multiple-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SdSelectMultipleGroup$1);
+            }
+            break;
+        case "sd-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "sd-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "sd-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-select-option-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const SdSelectMultipleGroup = SdSelectMultipleGroup$1;
+const defineCustomElement = defineCustomElement$1;
+export { SdSelectMultipleGroup, defineCustomElement };
+//# sourceMappingURL=sd-select-multiple-group.js.map
+//# sourceMappingURL=sd-select-multiple-group.js.map

package/dist/components/sd-select-multiple-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sd-select-multiple-group.js","mappings":"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","names":["SdSelectMultipleGroup","__stencil_proxyCustomElement"],"sources":["src/components/sd-select-multiple-group/sd-select-multiple-group.scss?tag=sd-select-multiple-group","src/components/sd-select-multiple-group/sd-select-multiple-group.tsx"],"sourcesContent":["@import 'global';\r\n\r\n:host {\r\n display: display;\r\n height: fit-content;\r\n}\r\n\r\n.sd-select-multiple-group {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n width: var(--select-width, 200px);\r\n cursor: pointer;\r\n user-select: none;\r\n border: 1px solid $grey_55;\r\n border-radius: 4px;\r\n background-color: white;\r\n\r\n &:hover:not(.sd-select-multiple-group--disabled) {\r\n background: $grey_10;\r\n }\r\n\r\n &.sd-select-multiple-group--disabled {\r\n cursor: not-allowed;\r\n background-color: $grey_20;\r\n border-color: $grey_45;\r\n\r\n .sd-select-multiple-group__label {\r\n border-right: 1px solid $grey_45;\r\n }\r\n\r\n .sd-select-multiple-group__trigger {\r\n color: $grey_65;\r\n &:focus,\r\n &:focus-visible,\r\n &:focus-within {\r\n outline: none !important;\r\n }\r\n }\r\n }\r\n\r\n &__label {\r\n font-size: 12px;\r\n font-weight: 500;\r\n color: $grey_90;\r\n padding: 4px 12px;\r\n border-right: 1px solid $grey_45;\r\n border-radius: 4px 0 0 4px;\r\n background-color: $grey_10;\r\n }\r\n\r\n &__container {\r\n position: relative;\r\n width: 100%;\r\n display: flex;\r\n\r\n .sd-select-multiple-group__trigger {\r\n padding: 4px 20px 4px 12px;\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n\r\n .sd-select-multiple-group__value {\r\n flex: 1;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n line-height: 20px;\r\n font-size: 12px;\r\n font-weight: 400;\r\n }\r\n\r\n .sd-select-multiple-group__clear {\r\n margin: 0 4px;\r\n width: 8px;\r\n height: 8px;\r\n background-color: transparent;\r\n outline: none;\r\n border: none;\r\n }\r\n }\r\n\r\n .sd-select-multiple-group__arrow {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n width: 12px;\r\n height: 12px;\r\n color: $grey_65;\r\n transition: transform 0.3s ease;\r\n\r\n &--open {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.sd-select-multiple-group__dropdown {\r\n @extend %scrollBar;\r\n width: var(--select-width, 200px);\r\n max-height: var(--select-dropdown-height, 260px);\r\n padding-bottom: 2px;\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);\r\n border-radius: 4px;\r\n overflow-y: auto;\r\n\r\n .sd-select-multiple-group__search-container {\r\n position: sticky;\r\n top: 0;\r\n display: flex;\r\n width: 100%;\r\n background-color: white;\r\n align-items: center;\r\n padding: 4px 8px;\r\n\r\n &--scrolled {\r\n box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.2);\r\n }\r\n }\r\n\r\n .sd-select-multiple-group__option-placeholder {\r\n padding: 4px 12px;\r\n font-size: 12px;\r\n line-height: 20px;\r\n }\r\n}\r\n","import {\r\n Component,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from '@stencil/core';\r\nimport { BaseDropdownEvent } from '../../utils/base-dropdown-event';\r\nimport { SelectMultipleEvents, SelectOption, SelectStyleProps } from '../sd-select/sd-select';\r\nimport { SelectKeyboardNavigation } from '../../utils/select-keyboard-navigation';\r\n\r\nexport interface SelectOptionGroup extends SelectOption {\r\n type: 'group' | 'subgroup' | 'item';\r\n parent?: string;\r\n}\r\n\r\n@Component({\r\n tag: 'sd-select-multiple-group',\r\n styleUrl: 'sd-select-multiple-group.scss',\r\n})\r\nexport class SdSelectMultipleGroup extends BaseDropdownEvent {\r\n @Element() el!: HTMLElement;\r\n\r\n // props\r\n @Prop({ mutable: true }) value: SelectOptionGroup[] | null = null;\r\n @Prop() label: string = '';\r\n @Prop({ mutable: true }) options: SelectOptionGroup[] = [];\r\n @Prop() placeholder: string = '선택';\r\n @Prop() optionPlaceholder: string = '옵션이 없습니다.';\r\n @Prop() width: string = '200px';\r\n @Prop() dropdownHeight: string = '260px';\r\n @Prop() disabled: boolean = false;\r\n @Prop() clearable: boolean = false;\r\n @Prop() searchable: boolean = false;\r\n @Prop() useCheckbox: boolean = false;\r\n\r\n // props - custom styles\r\n @Prop() containerStyle: SelectStyleProps['containerStyle'] = {};\r\n @Prop() triggerStyle: SelectStyleProps['triggerStyle'] = {};\r\n @Prop() dropdownStyle: SelectStyleProps['dropdownStyle'] = {};\r\n @Prop() optionStyle: SelectStyleProps['optionStyle'] = {};\r\n @Prop() labelStyle: SelectStyleProps['labelStyle'] = {};\r\n\r\n // props - custom slots\r\n @Prop() optionRenderer?: (option: SelectOption, index: number, isSelected: boolean) => any;\r\n\r\n // states\r\n @State() filteredOptions = this.options;\r\n @State() isOpen: boolean = false;\r\n @State() searchText: string | null = null;\r\n @State() itemIndex: number = -1;\r\n @State() isScrolled: boolean = false;\r\n\r\n // events\r\n @Event() sdChange?: EventEmitter<SelectMultipleEvents['sdChange']>;\r\n @Event() dropDownShow?: EventEmitter<SelectMultipleEvents['dropDownShow']>;\r\n\r\n private selectRef?: HTMLElement;\r\n private searchRef?: HTMLSdInputElement;\r\n private optionRef?: HTMLSdSelectOptionElement;\r\n private dropdownRef?: HTMLElement;\r\n\r\n @Watch('value')\r\n valueChanged() {\r\n this.sdChange?.emit(this.value);\r\n }\r\n\r\n @Watch('options')\r\n optionsChanged() {\r\n this.filteredOptions = this.options;\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('searchText')\r\n searchTextChanged() {\r\n this.filterOptions();\r\n }\r\n\r\n @Watch('itemIndex')\r\n async itemIndexChanged(newIndex: number, oldIndex: number) {\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n if (this.itemIndex === -1) {\r\n searchInput?.focus();\r\n return;\r\n } else if (searchInput?.matches(':focus')) {\r\n searchInput?.blur();\r\n }\r\n }\r\n\r\n const optionElements = Array.from(\r\n this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-option') || [],\r\n );\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n if (!currentItem || !this.isOpen) return;\r\n\r\n this.optionRef = currentItem as HTMLSdSelectOptionElement;\r\n const isOptionDisabled = await this.optionRef.isDisabled();\r\n\r\n if (isOptionDisabled) {\r\n newIndex > oldIndex ? this.itemIndex++ : this.itemIndex--;\r\n return;\r\n }\r\n\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n @Watch('isOpen')\r\n async isOpenChanged() {\r\n // Base class의 이벤트 관리 호출 - 다른 select와의 이벤트 충돌 방지\r\n this.onDropdownToggle(this.isOpen);\r\n\r\n const selectedOption = this.getSelectedOption();\r\n if (!selectedOption) {\r\n this.itemIndex = -1;\r\n } else {\r\n this.itemIndex = this.options.indexOf(selectedOption[0]);\r\n }\r\n\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n\r\n if (this.isOpen === false) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10));\r\n\r\n const optionElements = Array.from(\r\n this.dropdownRef?.querySelectorAll('.sd-select-multiple__dropdown sd-select-item') || [],\r\n );\r\n const currentItem = optionElements?.[this.itemIndex];\r\n\r\n // 드롭다운이 열릴 때 검색 입력에 포커스\r\n if (this.searchable) {\r\n const searchInput = await this.getNativeInputElement();\r\n searchInput?.focus();\r\n }\r\n\r\n if (!currentItem) return;\r\n\r\n await new Promise(resolve => setTimeout(resolve, 10)); // 추가 딜레이\r\n this.scrollToOption(currentItem as HTMLElement);\r\n }\r\n\r\n connectedCallback() {\r\n // props가 모두 설정된 후에 실행되므로 올바른 options 값을 가져올 수 있음\r\n this.filteredOptions = this.options;\r\n this.initializeEvent(); // global dropdown Manager에 등록 + 이벤트 핸들러 초기화\r\n }\r\n\r\n disconnectedCallback() {\r\n this.cleanupEvent(); // global dropdown Manager에서 제거 + 이벤트 정리\r\n }\r\n\r\n protected handleDocumentClick(event: Event): void {\r\n if (!this.selectRef?.contains(event.target as Node)) {\r\n this.isOpen = false;\r\n }\r\n }\r\n\r\n protected handleDocumentKeydown(keyboardEvent: KeyboardEvent): void {\r\n keyboardEvent.stopPropagation();\r\n const targetKey = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];\r\n if (!targetKey.includes(keyboardEvent.key)) return;\r\n\r\n keyboardEvent.preventDefault();\r\n switch (keyboardEvent.key) {\r\n case 'ArrowDown':\r\n case 'ArrowUp':\r\n const keyboardNavigation = new SelectKeyboardNavigation(this.searchable, this.filteredOptions);\r\n const nextIndex = keyboardNavigation.getNextIndex(this.itemIndex, keyboardEvent.key);\r\n this.itemIndex = nextIndex;\r\n break;\r\n case 'Enter':\r\n const selectedOption = this.filteredOptions[this.itemIndex];\r\n if (selectedOption && !selectedOption.disabled) {\r\n this.handleOptionSelection(selectedOption);\r\n }\r\n break;\r\n case 'Escape':\r\n this.isOpen = false;\r\n break;\r\n }\r\n }\r\n\r\n // event handlers\r\n handleTriggerClick = (event: Event) => {\r\n event.stopPropagation();\r\n\r\n if (!this.disabled) {\r\n this.isOpen = !this.isOpen;\r\n this.dropDownShow?.emit({ isOpen: this.isOpen });\r\n }\r\n };\r\n\r\n handleOptionClick = (detail: {\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n index: number;\r\n event: MouseEvent;\r\n }) => {\r\n const { option, event } = detail;\r\n event.stopPropagation();\r\n\r\n if (option.type === 'group') this.handleGroupOptionClick(detail);\r\n if (option.type === 'subgroup') this.handleSubGroupOptionClick(detail);\r\n if (option.type === 'item') this.handleOptionSelection(option);\r\n };\r\n\r\n handleGroupOptionClick = (detail: {\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n index: number;\r\n }) => {\r\n const { option, isSelected } = detail;\r\n const childOptions = this.options.filter(opt => opt.parent === option.value && !opt.disabled);\r\n\r\n childOptions.forEach(subgroup => {\r\n this.handleSubGroupOptionClick({\r\n option: subgroup,\r\n isSelected: isSelected || isSelected === null,\r\n });\r\n });\r\n };\r\n\r\n handleSubGroupOptionClick = (detail: {\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n }) => {\r\n const { option, isSelected } = detail;\r\n\r\n const childOptions = this.options.filter(opt => opt.parent === option.value && !opt.disabled);\r\n\r\n if (isSelected || isSelected === null) {\r\n // 모든 자식 옵션이 선택된 경우, 모두 선택 해제\r\n this.value =\r\n this.value?.filter(selected => !childOptions.some(child => child.value === selected.value)) ||\r\n null;\r\n } else {\r\n // 일부 또는 전체 자식 옵션이 선택되지 않은 경우, 모두 선택\r\n const newSelections = childOptions.filter(\r\n child => !this.value?.some(selected => selected.value === child.value),\r\n );\r\n this.value = [...(this.value || []), ...newSelections];\r\n }\r\n };\r\n\r\n private filterOptions() {\r\n if (!this.searchText || this.searchText.trim() === '') {\r\n // 검색어가 없으면 전체 옵션 표시\r\n this.filteredOptions = this.options;\r\n } else {\r\n // 검색어가 있으면 필터링\r\n this.filteredOptions = this.options.filter(option =>\r\n option.label.toLowerCase().includes(this.searchText!.toLowerCase()),\r\n );\r\n }\r\n }\r\n\r\n private getSelectedOption(): SelectOptionGroup[] {\r\n return this.options.filter(option => this.value?.includes(option));\r\n }\r\n\r\n private handleDropdownScroll = (event: Event) => {\r\n const target = event.target as HTMLElement;\r\n const scrollTop = target.scrollTop;\r\n\r\n // 스크롤이 조금이라도 되면 그림자 표시\r\n this.isScrolled = scrollTop > 0;\r\n };\r\n\r\n private async getNativeInputElement(): Promise<HTMLInputElement | null> {\r\n if (this.searchRef) {\r\n return this.searchRef.getNativeElement();\r\n }\r\n return null;\r\n }\r\n\r\n private handleOptionSelection = (option: SelectOptionGroup) => {\r\n if (!option || option.disabled) return;\r\n\r\n const isAlreadySelected = this.value?.some(opt => opt.value === option.value);\r\n if (isAlreadySelected) {\r\n // 이미 선택된 옵션인 경우, 선택 해제\r\n this.value = this.value?.filter(opt => opt.value !== option.value) || null;\r\n } else {\r\n // 새로운 옵션 선택\r\n this.value = [...(this.value || []), option];\r\n }\r\n };\r\n\r\n private isAllChildrenSelected(parentOption: SelectOptionGroup): boolean | null {\r\n const childOptions = this.options.filter(option => option.parent === parentOption.value);\r\n const isChecked = childOptions.filter(child =>\r\n this.value?.some(selected => selected.value === child.value),\r\n );\r\n if (isChecked.length === childOptions.length) return true;\r\n if (isChecked.length > 0) return null;\r\n return false;\r\n }\r\n\r\n closeDropdown() {\r\n this.isOpen = false;\r\n }\r\n\r\n private scrollToOption(optionElement: HTMLElement) {\r\n if (!this.dropdownRef || !optionElement) return;\r\n\r\n const dropdown = this.dropdownRef;\r\n const optionTop = optionElement.offsetTop;\r\n const optionHeight = optionElement.offsetHeight;\r\n const dropdownScrollTop = dropdown.scrollTop;\r\n const dropdownHeight = dropdown.clientHeight;\r\n\r\n const searchContainer = dropdown.querySelector('.sd-select__search-container');\r\n const searchOffset = searchContainer ? (searchContainer as HTMLElement).offsetHeight : 0;\r\n\r\n const visibleTop = dropdownScrollTop + searchOffset;\r\n const visibleBottom = dropdownScrollTop + dropdownHeight;\r\n\r\n if (optionTop < visibleTop) {\r\n dropdown.scrollTop = optionTop - searchOffset;\r\n } else if (optionTop + optionHeight > visibleBottom) {\r\n dropdown.scrollTop = optionTop + optionHeight - dropdownHeight + searchOffset;\r\n }\r\n }\r\n\r\n render() {\r\n const style = {\r\n '--select-width': this.width || '200px',\r\n '--select-dropdown-height': this.dropdownHeight || '260px',\r\n };\r\n\r\n return (\r\n <Host style={style}>\r\n <div\r\n class={{\r\n 'sd-select-multiple-group': true,\r\n 'sd-select-multiple-group--open': this.isOpen,\r\n 'sd-select-multiple-group--disabled': this.disabled,\r\n }}\r\n style={this.containerStyle}\r\n ref={el => (this.selectRef = el)}\r\n >\r\n {this.renderLabel(this.label, this.labelStyle)}\r\n <div class=\"sd-select-multiple-group__container\">\r\n {this.renderTrigger()}\r\n {this.renderDropdown()}\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderLabel(label?: string, labelStyle?: { [key: string]: string }) {\r\n if (!label) return null;\r\n\r\n return (\r\n <label class=\"sd-select-multiple-group__label\" style={labelStyle}>\r\n {label}\r\n </label>\r\n );\r\n }\r\n\r\n private renderTrigger() {\r\n const selectedOption = this.getSelectedOption();\r\n return (\r\n <div\r\n class=\"sd-select-multiple-group__trigger\"\r\n tabindex={this.disabled ? -1 : 0}\r\n onClick={this.handleTriggerClick}\r\n style={this.triggerStyle}\r\n >\r\n <span class=\"sd-select-multiple-group__value\">\r\n {!selectedOption\r\n ? '선택'\r\n : selectedOption.length\r\n ? selectedOption.map(option => option.label).join(', ')\r\n : this.placeholder}\r\n </span>\r\n {this.clearable && selectedOption?.length > 0 && !this.disabled && (\r\n <sd-icon\r\n key=\"close-icon\"\r\n name=\"close\"\r\n size={10}\r\n color=\"#888\"\r\n class=\"sd-select-multiple-group__clear\"\r\n onClick={event => {\r\n event.stopPropagation();\r\n this.value = null;\r\n }}\r\n ></sd-icon>\r\n )}\r\n\r\n <sd-icon\r\n key=\"arrow-icon\"\r\n name=\"arrowDown\"\r\n color=\"#888\"\r\n class={{\r\n 'sd-select-multiple-group__arrow': true,\r\n 'sd-select-multiple-group__arrow--open': this.isOpen,\r\n }}\r\n ></sd-icon>\r\n </div>\r\n );\r\n }\r\n\r\n private renderDropdown() {\r\n if (this.isOpen === false) return null;\r\n\r\n return (\r\n <sd-portal open={this.isOpen} parentRef={this.selectRef} onSdClose={this.closeDropdown}>\r\n <div\r\n class=\"sd-select-multiple-group__dropdown\"\r\n style={this.dropdownStyle}\r\n onScroll={this.handleDropdownScroll}\r\n >\r\n {this.searchable && (\r\n <div\r\n class={{\r\n 'sd-select-multiple-group__search-container': true,\r\n 'sd-select-multiple-group__search-container--scrolled': this.isScrolled,\r\n }}\r\n onClick={event => event.stopPropagation()}\r\n >\r\n <sd-input\r\n ref={el => (this.searchRef = el)}\r\n value={this.searchText}\r\n placeholder=\"검색\"\r\n clearable\r\n inputStyle={{ 'padding-left': '8px' }}\r\n autofocus\r\n onSdInput={event => {\r\n this.searchText = String(event?.detail);\r\n }}\r\n onSdFocus={() => {\r\n this.itemIndex = -1;\r\n }}\r\n >\r\n <sd-icon name=\"search\" size={16} color=\"#737373\" slot=\"prefix\"></sd-icon>\r\n </sd-input>\r\n </div>\r\n )}\r\n {this.filteredOptions.length > 0 ? (\r\n this.filteredOptions.map((option, index) => (\r\n <slot name={`option-${option.value}`}>\r\n <sd-select-option-group\r\n option={option}\r\n index={index}\r\n isSelected={\r\n option.type === 'item'\r\n ? this.value?.some(selected => selected.value === option.value)\r\n : this.isAllChildrenSelected(option)\r\n }\r\n isFocused={index === this.itemIndex}\r\n optionStyle={this.optionStyle}\r\n onOptionClick={({\r\n detail,\r\n }: {\r\n detail: {\r\n option: SelectOptionGroup;\r\n isSelected: boolean | null;\r\n index: number;\r\n event: MouseEvent;\r\n };\r\n }) => this.handleOptionClick(detail)}\r\n useCheckbox={this.useCheckbox}\r\n ></sd-select-option-group>\r\n </slot>\r\n ))\r\n ) : (\r\n <slot name=\"option-placeholder\">\r\n <div class={'sd-select-multiple-group__option-placeholder'} style={this.optionStyle}>\r\n {this.optionPlaceholder}\r\n </div>\r\n </slot>\r\n )}\r\n </div>\r\n </sd-portal>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/sd-select-multiple.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SdSelectMultiple extends Components.SdSelectMultiple, HTMLElement {}
+export const SdSelectMultiple: {
+    prototype: SdSelectMultiple;
+    new (): SdSelectMultiple;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;