@sellmate/design-system 0.0.30 → 0.0.31

package/dist/design-system/{p-e2a11135.entry.js → p-e9800353.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,a as s,h as i,H as l}from"./p-B2T3tS5r.js";import{B as o,S as r}from"./p-C2JaR3A6.js";const c=".sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__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__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__dropdown{width:var(--select-dropdown-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;color:#333333}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";const n=class extends o{constructor(s){super();e(this,s);this.sdChange=t(this,"sdChange");this.dropDownShow=t(this,"dropDownShow")}get el(){return s(this)}value=null;label="";options=[];placeholder="선택";optionPlaceholder="옵션이 없습니다.";width="200px";dropdownHeight="260px";disabled=false;clearable=false;searchable=false;useCheckbox=false;optionRenderer;filteredOptions=this.options;isOpen=false;searchText=null;itemIndex=-1;isScrolled=false;sdChange;dropDownShow;selectRef;searchRef;optionRef;dropdownRef;valueChanged(){this.sdChange?.emit(this.value)}optionsChanged(){this.filteredOptions=this.options;this.filterOptions()}searchTextChanged(){this.filterOptions()}async itemIndexChanged(e,t){if(this.searchable){const e=await this.getNativeInputElement();if(this.itemIndex===-1){e?.focus();return}else if(e?.matches(":focus")){e?.blur()}}const s=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-option")||[]);const i=s?.[this.itemIndex];if(!i||!this.isOpen)return;this.optionRef=i;const l=await this.optionRef.isDisabled();if(l){e>t?this.itemIndex++:this.itemIndex--;return}this.scrollToOption(i)}async isOpenChanged(){this.onDropdownToggle(this.isOpen);const e=this.getSelectedOption();if(!e){this.itemIndex=-1}else{this.itemIndex=this.options.indexOf(e[0])}this.dropDownShow?.emit({isOpen:this.isOpen});if(this.isOpen===false)return;await new Promise((e=>setTimeout(e,10)));const t=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-item")||[]);const s=t?.[this.itemIndex];if(this.searchable){const e=await this.getNativeInputElement();e?.focus()}if(!s)return;await new Promise((e=>setTimeout(e,10)));this.scrollToOption(s)}connectedCallback(){this.filteredOptions=this.options;this.initializeEvent()}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){if(!this.selectRef?.contains(e.target)){this.isOpen=false}}handleDocumentKeydown(e){e.stopPropagation();const t=["ArrowDown","ArrowUp","Enter","Escape"];if(!t.includes(e.key))return;e.preventDefault();switch(e.key){case"ArrowDown":case"ArrowUp":const t=new r(this.searchable,this.filteredOptions);const s=t.getNextIndex(this.itemIndex,e.key);this.itemIndex=s;break;case"Enter":const i=this.filteredOptions[this.itemIndex];if(i&&!i.disabled){this.handleOptionSelection(i)}break;case"Escape":this.isOpen=false;break}}handleTriggerClick=e=>{e.stopPropagation();if(!this.disabled){this.isOpen=!this.isOpen;this.dropDownShow?.emit({isOpen:this.isOpen})}};handleOptionClick=e=>{const{option:t,event:s}=e;s.stopPropagation();this.handleOptionSelection(t)};filterOptions(){if(!this.searchText||this.searchText.trim()===""){this.filteredOptions=this.options}else{this.filteredOptions=this.options.filter((e=>e.label.toLowerCase().includes(this.searchText.toLowerCase())))}}getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}handleDropdownScroll=e=>{const t=e.target;const s=t.scrollTop;this.isScrolled=s>0};async getNativeInputElement(){if(this.searchRef){return this.searchRef.getNativeElement()}return null}handleOptionSelection=e=>{if(!e||e.disabled)return;const t=this.value?.some((t=>t.value===e.value));if(t){this.value=this.value?.filter((t=>t.value!==e.value))||null}else{this.value=[...this.value||[],e]}};closeDropdown(){this.isOpen=false}scrollToOption(e){if(!this.dropdownRef||!e)return;const t=this.dropdownRef;const s=e.offsetTop;const i=e.offsetHeight;const l=t.scrollTop;const o=t.clientHeight;const r=t.querySelector(".sd-select__search-container");const c=r?r.offsetHeight:0;const n=l+c;const d=l+o;if(s<n){t.scrollTop=s-c}else if(s+i>d){t.scrollTop=s+i-o+c}}render(){const e={"--select-width":this.width||"200px","--select-dropdown-height":this.dropdownHeight||"260px"};return i(l,{key:"8f2df6c0a3b6e8d2300a77bd84b993101824cae1",style:e},i("div",{key:"9587ca5bb88d7767b5f48344063deef220964027",class:{"sd-select-multiple":true,"sd-select-multiple--open":this.isOpen,"sd-select-multiple--disabled":this.disabled},ref:e=>this.selectRef=e},this.renderLabel(this.label),i("div",{key:"f00fa7d7c2cbc6f751cc89411b1d77037a950e3e",class:"sd-select-multiple__container"},this.renderTrigger(),this.renderDropdown())))}renderLabel(e){if(!e)return null;return i("label",{class:"sd-select-multiple__label"},e)}renderTrigger(){const e=this.getSelectedOption();return i("div",{class:"sd-select-multiple__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick},i("span",{class:"sd-select-multiple__value"},!e?"선택":e.length?e.map((e=>e.label)).join(", "):this.placeholder),this.clearable&&e?.length>0&&!this.disabled&&i("sd-icon",{key:"close-icon",name:"close",size:10,color:"#888",class:"sd-select-multiple__clear",onClick:e=>{e.stopPropagation();this.value=null}}),i("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple__arrow":true,"sd-select-multiple__arrow--open":this.isOpen}}))}renderDropdown(){if(this.isOpen===false)return null;return i("sd-portal",{open:this.isOpen,parentRef:this.selectRef,onSdClose:this.closeDropdown},i("div",{class:"sd-select-multiple__dropdown",onScroll:this.handleDropdownScroll,ref:e=>this.dropdownRef=e},this.searchable&&i("div",{class:{"sd-select-multiple__search-container":true,"sd-select-multiple__search-container--scrolled":this.isScrolled},onClick:e=>e.stopPropagation()},i("sd-input",{ref:e=>this.searchRef=e,value:this.searchText,placeholder:"검색",clearable:true,inputStyle:{"padding-left":"8px"},autofocus:true,onSdInput:e=>{this.searchText=String(e?.detail)},onSdFocus:()=>{this.itemIndex=-1}},i("sd-icon",{name:"search",size:16,color:"#737373",style:{marginRight:"4px"},slot:"prefix"}))),this.filteredOptions.length>0?this.filteredOptions.map(((e,t)=>i("slot",{name:`option-${e.value}`},i("sd-select-option",{option:e,index:t,isSelected:this.value?.some((t=>t.value===e.value)),isFocused:t===this.itemIndex,onOptionClick:({detail:e})=>this.handleOptionClick(e),useCheckbox:this.useCheckbox})))):i("slot",{name:"option-placeholder"},i("div",{class:"sd-select-multiple__option-placeholder"},this.optionPlaceholder))))}static get watchers(){return{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}}};n.style=c;export{n as sd_select_multiple};
-//# sourceMappingURL=p-e2a11135.entry.js.map
+import{r as e,c as t,a as s,h as i,H as l}from"./p-B2T3tS5r.js";import{B as o,S as r}from"./p-C2JaR3A6.js";const c=".sd-select-multiple__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple__dropdown::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-select-multiple__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-select-multiple__dropdown::-webkit-scrollbar-track{background-color:transparent}:host{display:inline-block;height:fit-content;position:relative}.sd-select-multiple{display:flex;flex-wrap:nowrap;width:var(--select-width, 200px);height:28px;cursor:pointer;user-select:none;border:1px solid #aaaaaa;border-radius:4px;background-color:white}.sd-select-multiple:hover:not(.sd-select-multiple--disabled){background:#f6f6f6}.sd-select-multiple.sd-select-multiple--disabled{cursor:not-allowed;background-color:#eeeeee;border-color:#cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__label{border-right:1px solid #cccccc}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger{color:#888888}.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-visible,.sd-select-multiple.sd-select-multiple--disabled .sd-select-multiple__trigger:focus-within{outline:none !important}.sd-select-multiple__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__container{position:relative;width:100%;display:flex}.sd-select-multiple__container .sd-select-multiple__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}.sd-select-multiple__container .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}.sd-select-multiple__container .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}.sd-select-multiple__container .sd-select-multiple__arrow--open{transform:rotate(180deg)}.sd-select-multiple__dropdown{width:var(--select-dropdown-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;color:#333333}.sd-select-multiple__dropdown .sd-select-multiple__search-container{position:sticky;top:0;display:flex;width:100%;background-color:white;align-items:center;padding:4px 8px;z-index:1}.sd-select-multiple__dropdown .sd-select-multiple__search-container--scrolled{box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}.sd-select-multiple__dropdown .sd-select-multiple__option-placeholder{padding:4px 12px;font-size:12px;line-height:20px;text-align:left}";const n=class extends o{constructor(s){super();e(this,s);this.sdChange=t(this,"sdChange");this.dropDownShow=t(this,"dropDownShow")}get el(){return s(this)}value=null;label="";options=[];placeholder="선택";optionPlaceholder="옵션이 없습니다.";width="200px";dropdownHeight="260px";disabled=false;clearable=false;searchable=false;useCheckbox=false;optionRenderer;filteredOptions=this.options;isOpen=false;searchText=null;itemIndex=-1;isScrolled=false;sdChange;dropDownShow;selectRef;searchRef;optionRef;dropdownRef;valueChanged(){this.sdChange?.emit(this.value)}optionsChanged(){this.filteredOptions=this.options;this.filterOptions()}searchTextChanged(){this.filterOptions()}async itemIndexChanged(e,t){if(this.searchable){const e=await this.getNativeInputElement();if(this.itemIndex===-1){e?.focus();return}else if(e?.matches(":focus")){e?.blur()}}const s=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-option")||[]);const i=s?.[this.itemIndex];if(!i||!this.isOpen)return;this.optionRef=i;const l=await this.optionRef.isDisabled();if(l){e>t?this.itemIndex++:this.itemIndex--;return}this.scrollToOption(i)}async isOpenChanged(){this.onDropdownToggle(this.isOpen);const e=this.getSelectedOption();if(!e){this.itemIndex=-1}else{this.itemIndex=this.options.indexOf(e[0])}this.dropDownShow?.emit({isOpen:this.isOpen});if(this.isOpen===false)return;await new Promise((e=>setTimeout(e,10)));const t=Array.from(this.dropdownRef?.querySelectorAll(".sd-select-multiple__dropdown sd-select-item")||[]);const s=t?.[this.itemIndex];if(this.searchable){const e=await this.getNativeInputElement();e?.focus()}if(!s)return;await new Promise((e=>setTimeout(e,10)));this.scrollToOption(s)}connectedCallback(){this.filteredOptions=this.options;this.initializeEvent()}disconnectedCallback(){this.cleanupEvent()}handleDocumentClick(e){if(!this.selectRef?.contains(e.target)){this.isOpen=false}}handleDocumentKeydown(e){e.stopPropagation();const t=["ArrowDown","ArrowUp","Enter","Escape"];if(!t.includes(e.key))return;e.preventDefault();switch(e.key){case"ArrowDown":case"ArrowUp":const t=new r(this.searchable,this.filteredOptions);const s=t.getNextIndex(this.itemIndex,e.key);this.itemIndex=s;break;case"Enter":const i=this.filteredOptions[this.itemIndex];if(i&&!i.disabled){this.handleOptionSelection(i)}break;case"Escape":this.isOpen=false;break}}handleTriggerClick=e=>{e.stopPropagation();if(!this.disabled){this.isOpen=!this.isOpen;this.dropDownShow?.emit({isOpen:this.isOpen})}};handleOptionClick=e=>{const{option:t,event:s}=e;s.stopPropagation();this.handleOptionSelection(t)};filterOptions(){if(!this.searchText||this.searchText.trim()===""){this.filteredOptions=this.options}else{this.filteredOptions=this.options.filter((e=>e.label.toLowerCase().includes(this.searchText.toLowerCase())))}}getSelectedOption(){return this.options.filter((e=>this.value?.includes(e)))}handleDropdownScroll=e=>{const t=e.target;const s=t.scrollTop;this.isScrolled=s>0};async getNativeInputElement(){if(this.searchRef){return this.searchRef.getNativeElement()}return null}handleOptionSelection=e=>{if(!e||e.disabled)return;const t=this.value?.some((t=>t.value===e.value));if(t){this.value=this.value?.filter((t=>t.value!==e.value))||null}else{this.value=[...this.value||[],e]}};closeDropdown(){this.isOpen=false}scrollToOption(e){if(!this.dropdownRef||!e)return;const t=this.dropdownRef;const s=e.offsetTop;const i=e.offsetHeight;const l=t.scrollTop;const o=t.clientHeight;const r=t.querySelector(".sd-select__search-container");const c=r?r.offsetHeight:0;const n=l+c;const d=l+o;if(s<n){t.scrollTop=s-c}else if(s+i>d){t.scrollTop=s+i-o+c}}render(){const e={"--select-width":this.width||"200px","--select-dropdown-height":this.dropdownHeight||"260px"};return i(l,{key:"c569bb885003048b6ec22bfb0688c671a70a27d5",style:e},i("div",{key:"94b43199502f44f7d663981c320696c6e8cf968f",class:{"sd-select-multiple":true,"sd-select-multiple--open":this.isOpen,"sd-select-multiple--disabled":this.disabled},ref:e=>this.selectRef=e},this.renderLabel(this.label),i("div",{key:"d4fd6929b78add118c01d7b52c1c1e0be9867924",class:"sd-select-multiple__container"},this.renderTrigger(),this.renderDropdown())))}renderLabel(e){if(!e)return null;return i("label",{class:"sd-select-multiple__label"},e)}renderTrigger(){const e=this.getSelectedOption();return i("div",{class:"sd-select-multiple__trigger",tabindex:this.disabled?-1:0,onClick:this.handleTriggerClick},i("span",{class:"sd-select-multiple__value"},!e?"선택":e.length?e.map((e=>e.label)).join(", "):this.placeholder),this.clearable&&e?.length>0&&!this.disabled&&i("sd-icon",{key:"close-icon",name:"close",size:10,color:"#888",class:"sd-select-multiple__clear",onClick:e=>{e.stopPropagation();this.value=null}}),i("sd-icon",{key:"arrow-icon",name:"arrowDown",color:"#888",class:{"sd-select-multiple__arrow":true,"sd-select-multiple__arrow--open":this.isOpen}}))}renderDropdown(){if(this.isOpen===false)return null;return i("sd-portal",{open:this.isOpen,parentRef:this.selectRef,onSdClose:this.closeDropdown},i("div",{class:"sd-select-multiple__dropdown",onScroll:this.handleDropdownScroll,ref:e=>this.dropdownRef=e},this.searchable&&i("div",{class:{"sd-select-multiple__search-container":true,"sd-select-multiple__search-container--scrolled":this.isScrolled},onClick:e=>e.stopPropagation()},i("sd-input",{ref:e=>this.searchRef=e,value:this.searchText,placeholder:"검색",clearable:true,inputStyle:{"padding-left":"8px"},autofocus:true,onSdInput:e=>{this.searchText=String(e?.detail)},onSdFocus:()=>{this.itemIndex=-1}},i("sd-icon",{name:"search",size:16,color:"#737373",style:{marginRight:"4px"},slot:"prefix"}))),this.filteredOptions.length>0?this.filteredOptions.map(((e,t)=>i("slot",{name:`option-${e.value}`},i("sd-select-option",{option:e,index:t,isSelected:this.value?.some((t=>t.value===e.value)),isFocused:t===this.itemIndex,onOptionClick:({detail:e})=>this.handleOptionClick(e),useCheckbox:this.useCheckbox})))):i("slot",{name:"option-placeholder"},i("div",{class:"sd-select-multiple__option-placeholder"},this.optionPlaceholder))))}static get watchers(){return{value:["valueChanged"],options:["optionsChanged"],searchText:["searchTextChanged"],itemIndex:["itemIndexChanged"],isOpen:["isOpenChanged"]}}};n.style=c;export{n as sd_select_multiple};
+//# sourceMappingURL=p-e9800353.entry.js.map

package/dist/design-system/sd-progress.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-progress.entry.esm.js","sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\n\nsd-progress {\n display: block;\n\n .sd-progress__bar {\n  position: relative;\n  width: 360px;\n  height: 20px;\n  overflow: hidden;\n  border-radius: 4px;\n  background-color: $grey_20;\n  text-align: center;\n\n  &__percent {\n   width: var(--progress-percentage);\n   height: 100%;\n   border-radius: 4px;\n   background-color: var(--progress-color, $brilliantblue_75);\n   transition: all 0.5s;\n   &.proceed {\n    border-top-right-radius: 50%;\n   }\n  }\n  &__indicator {\n   position: absolute;\n   left: 0;\n   top: 0;\n   height: 20px;\n   width: 100%;\n   background-color: $grey_20;\n   line-height: 21px;\n   z-index: 1;\n  }\n\n  &__indicator--left {\n   color: var(--progress-color, $brilliantblue_75);\n   clip-path: inset(0 0 0 var(--progress-percentage));\n  }\n\n  &__indicator--right {\n   color: white;\n   background-color: var(--progress-color, $brilliantblue_75);\n   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\n  }\n }\n\n .sd-progress__spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  svg {\n   transform: rotate(-90deg);\n  }\n\n  &__label {\n   margin-top: 4px;\n   font-size: 16px;\n   color: var(--progress-color, $brilliantblue_75);\n  }\n }\n\n .sd-progress__label {\n  margin-top: 4px;\n  font-size: 12px;\n  color: $grey_95;\n  text-align: center;\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-progress',\n styleUrl: 'sd-progress.scss',\n})\nexport class SdProgress {\n @Prop() type: 'bar' | 'spinner' = 'bar';\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\n @Prop() percentage: number = 0;\n @Prop() size: number = 80;\n @Prop() strokeWidth: number = 12;\n @Prop() label?: string;\n\n private statusColor = {\n  default: '#aaaaaa',\n  progress: '#0075ff',\n  complete: '#12B553',\n  error: '#FB4444',\n };\n\n render() {\n  return (\n   <Host\n    style={{\n     '--progress-color': this.statusColor[this.status],\n     '--progress-percentage': `${this.percentage}%`,\n    }}\n   >\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\n   </Host>\n  );\n }\n\n renderBarProgress() {\n  return (\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\n    <div\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\n    ></div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\n     {this.percentage}%\n    </div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\n     {this.percentage}%\n    </div>\n   </div>\n  );\n }\n\n renderSpinnerProgress() {\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\n  const progressBgSize = `${this.size}px`;\n  const progressSize = `${this.size / 2}px`;\n\n  return (\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\n    <svg width={progressBgSize} height={progressBgSize}>\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke=\"#EEEEEE\"\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n     />\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke={this.statusColor[this.status]}\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n      stroke-dasharray={circumference}\n      stroke-dashoffset={offset}\n      stroke-linecap=\"round\"\n      class=\"transition-all duration-500\"\n     />\n    </svg>\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\n   </div>\n  );\n }\n}\n\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\n// <script>\n//  document.addEventListener('DOMContentLoaded', event => {\n//   progress = document.getElementById('sd-progress-1');\n//   progress2 = document.getElementById('sd-progress-2');\n//   progress3 = document.getElementById('sd-progress-3');\n//   progress2.label = 'test label...';\n//   progress3.percentage = 50;\n//   progress3.status = 'error';\n//   let percentage = 0;\n//   const interval = setInterval(() => {\n//    if (percentage >= 100) {\n//     clearInterval(interval);\n//     progress.status = 'complete';\n//     progress2.status = 'complete';\n//     return;\n//    }\n//    percentage += 10;\n//    progress.status = 'progress';\n//    progress.percentage = percentage;\n//    progress2.status = 'progress';\n//    progress2.percentage = percentage;\n//   }, 500);\n//  });\n// </script>\n"],"names":[],"mappings":"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"}

package/dist/esm/design-system.js

@@ -16,6 +16,6 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["sd-select-multiple",[[772,"sd-select-multiple",{"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"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group",[[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]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover",[[769,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["sd-badge",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-tag",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-date-box",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]],["sd-button_13",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[256,"sd-loading-spinner"],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"isDisabled":[64]}],[769,"sd-tooltip-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]]], options);
+  return bootstrapLazy([["sd-select-multiple",[[772,"sd-select-multiple",{"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"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group",[[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]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover",[[769,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["sd-badge",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-progress",[[768,"sd-progress",{"type":[1],"status":[1],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["sd-tag",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-button_13",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[256,"sd-loading-spinner"],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"isDisabled":[64]}],[769,"sd-tooltip-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]],["sd-date-box",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]]], options);
 });
 //# sourceMappingURL=design-system.js.map

package/dist/esm/loader.js

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-B2T3tS5r.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["sd-select-multiple",[[772,"sd-select-multiple",{"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"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group",[[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]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover",[[769,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["sd-badge",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-tag",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-date-box",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]],["sd-button_13",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[256,"sd-loading-spinner"],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"isDisabled":[64]}],[769,"sd-tooltip-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]]], options);
+  return bootstrapLazy([["sd-select-multiple",[[772,"sd-select-multiple",{"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"],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-select-multiple-group",[[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]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}]]],["sd-date-picker",[[770,"sd-date-picker",{"date":[1],"label":[1],"selectable":[16],"disabled":[4],"isOpen":[32],"currentDate":[32],"currentYear":[32],"currentMonth":[32]}]]],["sd-date-range-picker",[[770,"sd-date-range-picker",{"date":[16],"label":[1],"selectable":[16],"maxRange":[2,"max-range"],"disabled":[4],"isOpen":[32],"dateRange":[32],"hoverDate":[32],"prevYear":[32],"prevMonth":[32]}]]],["sd-popover",[[769,"sd-popover",{"show":[1028],"placement":[513],"color":[513],"icon":[513],"iconSize":[514,"icon-size"],"label":[1],"buttonSize":[513,"button-size"],"buttonVariant":[513,"button-variant"],"menuTitle":[513,"title"],"messages":[16],"buttons":[16],"menuClass":[1,"menu-class"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showPopover":[32],"slotContent":[32]},null,{"show":["watchShowHandler"]}]]],["sd-badge",[[770,"sd-badge",{"size":[1],"color":[1],"label":[1]}]]],["sd-card",[[772,"sd-card",{"bordered":[4],"class":[1]}]]],["sd-progress",[[768,"sd-progress",{"type":[1],"status":[1],"percentage":[2],"size":[2],"strokeWidth":[2,"stroke-width"],"label":[1]}]]],["sd-tag",[[769,"sd-tag",{"size":[1],"color":[1],"rounded":[4],"label":[1],"bgColor":[1,"bg-color"],"textColor":[1,"text-color"]}]]],["sd-button_13",[[772,"sd-table",{"columns":[16],"rows":[1040],"selected":[1040],"rowKey":[1,"row-key"],"selectable":[4],"resizable":[4],"width":[1],"height":[1],"stickyHeader":[4,"sticky-header"],"stickyColumn":[16],"noDataLabel":[1,"no-data-label"],"isLoading":[4,"is-loading"],"pagination":[16],"bodyCellRenderer":[16],"useInternalPagination":[4,"use-internal-pagination"],"useRowsPerPageSelect":[4,"use-rows-per-page-select"],"rowsPerPageOption":[16],"currentPage":[32],"innerRows":[32],"innerSelected":[32],"columnWidths":[32],"scrolledLeft":[32],"scrolledRight":[32]},null,{"columns":["handleColumnsChange"],"rows":["handleRowsChange"],"selected":["handleSelectedChange"],"pagination":["handlePaginationChange"]}],[768,"sd-guide",{"type":[1],"label":[1],"message":[1],"guideUrl":[1,"guide-url"],"popupWidth":[2,"popup-width"],"popupShow":[32]}],[772,"sd-select",{"value":[1032],"label":[1],"options":[1040],"placeholder":[1],"optionPlaceholder":[1,"option-placeholder"],"width":[1],"dropdownHeight":[1,"dropdown-height"],"disabled":[4],"clearable":[4],"searchable":[4],"optionRenderer":[16],"filteredOptions":[32],"isOpen":[32],"searchText":[32],"itemIndex":[32],"isScrolled":[32]},null,{"value":["valueChanged"],"options":["optionsChanged"],"searchText":["searchTextChanged"],"itemIndex":["itemIndexChanged"],"isOpen":["isOpenChanged"]}],[768,"sd-tooltip",{"trigger":[1],"placement":[1],"color":[1],"type":[1],"icon":[1],"iconSize":[2,"icon-size"],"label":[1],"buttonSize":[1,"button-size"],"buttonVariant":[1,"button-variant"],"noHover":[4,"no-hover"],"useClose":[4,"use-close"],"showTooltip":[32],"slotContent":[32]}],[768,"sd-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"simple":[4]},null,{"currentPage":["onPropChange"],"lastPage":["onPropChange"]}],[256,"sd-loading-spinner"],[768,"sd-select-option",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"isHovered":[32],"isDisabled":[64]}],[769,"sd-tooltip-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"placement":[1],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-button",{"variant":[1],"size":[1],"color":[1],"label":[1],"disabled":[4],"type":[1],"icon":[1],"iconColor":[1,"icon-color"],"iconSize":[2,"icon-size"],"iconRight":[1,"icon-right"],"noHover":[4,"no-hover"],"class":[1]}],[768,"sd-checkbox",{"checked":[4],"val":[8],"disabled":[4],"label":[1],"isChecked":[32]},null,{"checked":["watchValueHandler"]}],[772,"sd-input",{"value":[1032],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"width":[8],"barcode":[4],"rules":[16],"autoFocus":[4,"auto-focus"],"status":[1],"inputClass":[1,"input-class"],"readonly":[4],"inputStyle":[16],"internalValue":[32],"error":[32],"focused":[32],"hovered":[32],"getNativeElement":[64]},null,{"value":["valueChanged"],"internalValue":["internalValueChanged"]}],[772,"sd-portal",{"to":[1],"parentRef":[16],"offset":[16],"zIndex":[2,"z-index"],"open":[4]},[[9,"scroll","updatePosition"],[9,"resize","updatePosition"],[9,"mousedown","handleMouseDown"],[8,"click","handleWindowClick"]]],[768,"sd-icon",{"name":[1],"size":[8],"color":[1],"rotate":[2],"label":[1],"iconStyle":[16]}]]],["sd-select-option-group",[[768,"sd-select-option-group",{"option":[16],"index":[2],"isSelected":[4,"is-selected"],"isFocused":[4,"is-focused"],"optionStyle":[16],"disabled":[4],"useCheckbox":[4,"use-checkbox"],"useIndicator":[4,"use-indicator"],"countInfo":[16],"isHovered":[32],"isDisabled":[64]}]]],["sd-date-box",[[770,"sd-date-box",{"date":[8],"disabled":[4],"selected":[4],"isStartDate":[4,"is-start-date"],"isEndDate":[4,"is-end-date"],"isToday":[4,"is-today"],"inRange":[4,"in-range"],"type":[1]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -1391,7 +1391,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (h(Host, { key: 'f627f75ea5e3765390729eac31e02e78ca084e95' }, h("div", { key: 'ce5f8aa53fb8ae3a3b165c5778aa352a99d0ddf8', class: {
+        return (h(Host, { key: '57acf795fbb642249d9716fc8fa4123f2d939d2b' }, h("div", { key: '6653deafa3142a3bf9b67290dae411c29fc38f41', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -1720,20 +1720,20 @@ const SdTooltip = class {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '2a4473864df0253d22d03a7b1512d6261d2c5f1e' }, 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-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '48ba8d56f7ee68ac71bd7076c98f8e7081635de5', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: 'edb64ac6facd530f02a3c663a4d7e728270bb914', class: {
+        return (h(Fragment, { key: '45dbef1d93b082f8fe42c003f997aa80ad297ee5' }, 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-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '7357fe6678832a74c567b24e404d14d75a77b13f', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '3add41a611cb55fddaae7733b6db9ec996561723', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, h("i", { key: '2907f18d268eed0d0e70707b1fb113ca1b6ce1a6', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'fd6417e7cad6464f5830accca7842f9c2d5431ca', class: {
+            } }, h("i", { key: 'f62cfc386831412cb958da88a41e0487be40d119', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'daab1b1028832d95fb05456b96981cdeb1e31c4e', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '30e7d57e6bdd47ca5da01c8e94e6d29cc174de58', class: "sd-tooltip-menu__content", ref: el => {
+            } })), h("div", { key: 'ab7ca38aa68cf8279ff0d372651a4e26b217781c', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && h("span", { key: '9e6afb40c06db772ed94fd90c73713a1134e2866' }, this.el.textContent)), this.useClose && (h("div", { key: '8679d07e7d2e027f4a96ebaecd64b1fac9ecf503', class: "sd-tooltip-menu__close-button" }, h("button", { key: 'aa018b14eeeb08f872af25d93c0bd36708bf36e8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '0a0d3c6c246adccdb9b31502f13a1189a0a94554', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && h("span", { key: 'f5768e8b7e3033f64797aba77a504d57236e51e3' }, this.el.textContent)), this.useClose && (h("div", { key: '94bdf692fabf190912a64d6051957031b2964ae5', class: "sd-tooltip-menu__close-button" }, h("button", { key: '8826745fb1dab139358bc0d430d622abca333e5e', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: '863f114251ec302425224a7385dd23292f7f6340', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
 };
 SdTooltip.style = sdTooltipCss;
@@ -1886,7 +1886,7 @@ const SdTooltipPortal = class {
         this.sdClose.emit();
     }
     render() {
-        return h("slot", { key: '094d59498ba589963103957db54a7eae9e9771c4' });
+        return h("slot", { key: '96e22fb7cd79afbef7bcb1a9b055e6a2bf54dd76' });
     }
 };
 

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

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host } from './index-B2T3tS5r.js';
+
+const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:4px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
+
+const SdProgress = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    type = 'bar';
+    status = 'default';
+    percentage = 0;
+    size = 80;
+    strokeWidth = 12;
+    label;
+    statusColor = {
+        default: '#aaaaaa',
+        progress: '#0075ff',
+        complete: '#12B553',
+        error: '#FB4444',
+    };
+    render() {
+        return (h(Host, { key: '2e2f7cf77bbc63dfb15910a3bc50ac45601020cd', style: {
+                '--progress-color': this.statusColor[this.status],
+                '--progress-percentage': `${this.percentage}%`,
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '3e72a490e148886c59345e5ac3161f760e0f4e85', class: "sd-progress__label" }, this.label)));
+    }
+    renderBarProgress() {
+        return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, h("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
+    }
+    renderSpinnerProgress() {
+        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
+        const circumference = 2 * Math.PI * radius; // 원의 둘레
+        const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset
+        const progressBgSize = `${this.size}px`;
+        const progressSize = `${this.size / 2}px`;
+        return (h("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, h("svg", { width: progressBgSize, height: progressBgSize }, h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), h("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), h("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
+    }
+};
+SdProgress.style = sdProgressCss;
+
+export { SdProgress as sd_progress };
+//# sourceMappingURL=sd-progress.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sd-progress.entry.js","sources":["src/components/sd-progress/sd-progress.scss?tag=sd-progress","src/components/sd-progress/sd-progress.tsx"],"sourcesContent":["@import 'variables';\n\nsd-progress {\n display: block;\n\n .sd-progress__bar {\n  position: relative;\n  width: 360px;\n  height: 20px;\n  overflow: hidden;\n  border-radius: 4px;\n  background-color: $grey_20;\n  text-align: center;\n\n  &__percent {\n   width: var(--progress-percentage);\n   height: 100%;\n   border-radius: 4px;\n   background-color: var(--progress-color, $brilliantblue_75);\n   transition: all 0.5s;\n   &.proceed {\n    border-top-right-radius: 50%;\n   }\n  }\n  &__indicator {\n   position: absolute;\n   left: 0;\n   top: 0;\n   height: 20px;\n   width: 100%;\n   background-color: $grey_20;\n   line-height: 21px;\n   z-index: 1;\n  }\n\n  &__indicator--left {\n   color: var(--progress-color, $brilliantblue_75);\n   clip-path: inset(0 0 0 var(--progress-percentage));\n  }\n\n  &__indicator--right {\n   color: white;\n   background-color: var(--progress-color, $brilliantblue_75);\n   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);\n  }\n }\n\n .sd-progress__spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  svg {\n   transform: rotate(-90deg);\n  }\n\n  &__label {\n   margin-top: 4px;\n   font-size: 16px;\n   color: var(--progress-color, $brilliantblue_75);\n  }\n }\n\n .sd-progress__label {\n  margin-top: 4px;\n  font-size: 12px;\n  color: $grey_95;\n  text-align: center;\n }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-progress',\n styleUrl: 'sd-progress.scss',\n})\nexport class SdProgress {\n @Prop() type: 'bar' | 'spinner' = 'bar';\n @Prop() status: 'default' | 'progress' | 'complete' | 'error' = 'default';\n @Prop() percentage: number = 0;\n @Prop() size: number = 80;\n @Prop() strokeWidth: number = 12;\n @Prop() label?: string;\n\n private statusColor = {\n  default: '#aaaaaa',\n  progress: '#0075ff',\n  complete: '#12B553',\n  error: '#FB4444',\n };\n\n render() {\n  return (\n   <Host\n    style={{\n     '--progress-color': this.statusColor[this.status],\n     '--progress-percentage': `${this.percentage}%`,\n    }}\n   >\n    {this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress()}\n    {this.label && <div class=\"sd-progress__label\">{this.label}</div>}\n   </Host>\n  );\n }\n\n renderBarProgress() {\n  return (\n   <div class={`sd-progress__bar sd-progress__bar--${this.status}`}>\n    <div\n     class={['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ')}\n    ></div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--left\">\n     {this.percentage}%\n    </div>\n    <div class=\"sd-progress__bar__indicator sd-progress__bar__indicator--right\">\n     {this.percentage}%\n    </div>\n   </div>\n  );\n }\n\n renderSpinnerProgress() {\n  const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름\n  const circumference = 2 * Math.PI * radius; // 원의 둘레\n  const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset\n  const progressBgSize = `${this.size}px`;\n  const progressSize = `${this.size / 2}px`;\n\n  return (\n   <div class={`sd-progress__spinner sd-progress__spinner--${this.status}`}>\n    <svg width={progressBgSize} height={progressBgSize}>\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke=\"#EEEEEE\"\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n     />\n     <circle\n      cx={progressSize}\n      cy={progressSize}\n      r={radius}\n      stroke={this.statusColor[this.status]}\n      stroke-width={this.strokeWidth}\n      fill=\"transparent\"\n      stroke-dasharray={circumference}\n      stroke-dashoffset={offset}\n      stroke-linecap=\"round\"\n      class=\"transition-all duration-500\"\n     />\n    </svg>\n    <strong class=\"sd-progress__spinner__label\">{this.percentage} %</strong>\n   </div>\n  );\n }\n}\n\n//  <sd-progress id=\"sd-progress-1\"></sd-progress>\n//  <sd-progress id=\"sd-progress-2\" type=\"spinner\"></sd-progress>\n//  <sd-progress id=\"sd-progress-3\" type=\"spinner\"></sd-progress>\n// <script>\n//  document.addEventListener('DOMContentLoaded', event => {\n//   progress = document.getElementById('sd-progress-1');\n//   progress2 = document.getElementById('sd-progress-2');\n//   progress3 = document.getElementById('sd-progress-3');\n//   progress2.label = 'test label...';\n//   progress3.percentage = 50;\n//   progress3.status = 'error';\n//   let percentage = 0;\n//   const interval = setInterval(() => {\n//    if (percentage >= 100) {\n//     clearInterval(interval);\n//     progress.status = 'complete';\n//     progress2.status = 'complete';\n//     return;\n//    }\n//    percentage += 10;\n//    progress.status = 'progress';\n//    progress.percentage = percentage;\n//    progress2.status = 'progress';\n//    progress2.percentage = percentage;\n//   }, 500);\n//  });\n// </script>\n"],"names":[],"mappings":"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"}

package/dist/esm/sd-select-multiple.entry.js

@@ -213,11 +213,11 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (h(Host, { key: '8f2df6c0a3b6e8d2300a77bd84b993101824cae1', style: style }, h("div", { key: '9587ca5bb88d7767b5f48344063deef220964027', class: {
+        return (h(Host, { key: 'c569bb885003048b6ec22bfb0688c671a70a27d5', style: style }, h("div", { key: '94b43199502f44f7d663981c320696c6e8cf968f', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'f00fa7d7c2cbc6f751cc89411b1d77037a950e3e', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), h("div", { key: 'd4fd6929b78add118c01d7b52c1c1e0be9867924', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)

package/dist/esm/sd-select-option-group.entry.js

@@ -46,7 +46,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (h("div", { key: '6365bd1ae57487d7bbccf25637770aedecc2bc6c', class: {
+        return (h("div", { key: 'ab10e48405e8457f1319518f9790c5dd94d1b5e6', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -55,10 +55,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'b48606dad43a722f434df8b384e3c92332d59f94', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '2c564c5480482ade27ebb0cb066cc3c971d1f8f2', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'e9b0636bc98818aa48b5d486c3e5b4c216b76046', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'b7495da88ddad187588569c64235ccc1697466fe', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '2175b4ec10bf631a419f5cfa439e0c24f6ccf5a7', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'bbb57f2a8c00e2bb56a4f6a5b68cb5d09d81d9c7', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: 'f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'ee29e4503321462981c6d6fe497d70f271e5f814', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss;

package/dist/types/components/sd-progress/sd-progress.d.ts

@@ -0,0 +1,12 @@
+export declare class SdProgress {
+    type: 'bar' | 'spinner';
+    status: 'default' | 'progress' | 'complete' | 'error';
+    percentage: number;
+    size: number;
+    strokeWidth: number;
+    label?: string;
+    private statusColor;
+    render(): any;
+    renderBarProgress(): any;
+    renderSpinnerProgress(): any;
+}

package/dist/types/components.d.ts

@@ -353,6 +353,29 @@ export namespace Components {
          */
         "zIndex": number;
     }
+    interface SdProgress {
+        "label"?: string;
+        /**
+          * @default 0
+         */
+        "percentage": number;
+        /**
+          * @default 80
+         */
+        "size": number;
+        /**
+          * @default 'default'
+         */
+        "status": 'default' | 'progress' | 'complete' | 'error';
+        /**
+          * @default 12
+         */
+        "strokeWidth": number;
+        /**
+          * @default 'bar'
+         */
+        "type": 'bar' | 'spinner';
+    }
     interface SdSelect {
         /**
           * @default false
@@ -952,6 +975,12 @@ declare global {
         prototype: HTMLSdPortalElement;
         new (): HTMLSdPortalElement;
     };
+    interface HTMLSdProgressElement extends Components.SdProgress, HTMLStencilElement {
+    }
+    var HTMLSdProgressElement: {
+        prototype: HTMLSdProgressElement;
+        new (): HTMLSdProgressElement;
+    };
     interface HTMLSdSelectElementEventMap {
         "sdChange": SelectEvents['sdChange'];
         "dropDownShow": SelectEvents['dropDownShow'];
@@ -1112,6 +1141,7 @@ declare global {
         "sd-pagination": HTMLSdPaginationElement;
         "sd-popover": HTMLSdPopoverElement;
         "sd-portal": HTMLSdPortalElement;
+        "sd-progress": HTMLSdProgressElement;
         "sd-select": HTMLSdSelectElement;
         "sd-select-multiple": HTMLSdSelectMultipleElement;
         "sd-select-multiple-group": HTMLSdSelectMultipleGroupElement;
@@ -1464,6 +1494,29 @@ declare namespace LocalJSX {
          */
         "zIndex"?: number;
     }
+    interface SdProgress {
+        "label"?: string;
+        /**
+          * @default 0
+         */
+        "percentage"?: number;
+        /**
+          * @default 80
+         */
+        "size"?: number;
+        /**
+          * @default 'default'
+         */
+        "status"?: 'default' | 'progress' | 'complete' | 'error';
+        /**
+          * @default 12
+         */
+        "strokeWidth"?: number;
+        /**
+          * @default 'bar'
+         */
+        "type"?: 'bar' | 'spinner';
+    }
     interface SdSelect {
         /**
           * @default false
@@ -1858,6 +1911,7 @@ declare namespace LocalJSX {
         "sd-pagination": SdPagination;
         "sd-popover": SdPopover;
         "sd-portal": SdPortal;
+        "sd-progress": SdProgress;
         "sd-select": SdSelect;
         "sd-select-multiple": SdSelectMultiple;
         "sd-select-multiple-group": SdSelectMultipleGroup;
@@ -1887,6 +1941,7 @@ declare module "@stencil/core" {
             "sd-pagination": LocalJSX.SdPagination & JSXBase.HTMLAttributes<HTMLSdPaginationElement>;
             "sd-popover": LocalJSX.SdPopover & JSXBase.HTMLAttributes<HTMLSdPopoverElement>;
             "sd-portal": LocalJSX.SdPortal & JSXBase.HTMLAttributes<HTMLSdPortalElement>;
+            "sd-progress": LocalJSX.SdProgress & JSXBase.HTMLAttributes<HTMLSdProgressElement>;
             "sd-select": LocalJSX.SdSelect & JSXBase.HTMLAttributes<HTMLSdSelectElement>;
             "sd-select-multiple": LocalJSX.SdSelectMultiple & JSXBase.HTMLAttributes<HTMLSdSelectMultipleElement>;
             "sd-select-multiple-group": LocalJSX.SdSelectMultipleGroup & JSXBase.HTMLAttributes<HTMLSdSelectMultipleGroupElement>;

package/hydrate/index.js

@@ -5440,6 +5440,59 @@ class SdPortal {
     }; }
 }
 
+const sdProgressCss = "sd-progress{display:block}sd-progress .sd-progress__bar{position:relative;width:360px;height:20px;overflow:hidden;border-radius:4px;background-color:#eeeeee;text-align:center}sd-progress .sd-progress__bar__percent{width:var(--progress-percentage);height:100%;border-radius:4px;background-color:var(--progress-color, #0075ff);transition:all 0.5s}sd-progress .sd-progress__bar__percent.proceed{border-top-right-radius:50%}sd-progress .sd-progress__bar__indicator{position:absolute;left:0;top:0;height:20px;width:100%;background-color:#eeeeee;line-height:21px;z-index:1}sd-progress .sd-progress__bar__indicator--left{color:var(--progress-color, #0075ff);clip-path:inset(0 0 0 var(--progress-percentage))}sd-progress .sd-progress__bar__indicator--right{color:white;background-color:var(--progress-color, #0075ff);clip-path:inset(0 calc(100% - var(--progress-percentage)) 0 0)}sd-progress .sd-progress__spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}sd-progress .sd-progress__spinner svg{transform:rotate(-90deg)}sd-progress .sd-progress__spinner__label{margin-top:4px;font-size:16px;color:var(--progress-color, #0075ff)}sd-progress .sd-progress__label{margin-top:4px;font-size:12px;color:#222222;text-align:center}";
+
+class SdProgress {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    type = 'bar';
+    status = 'default';
+    percentage = 0;
+    size = 80;
+    strokeWidth = 12;
+    label;
+    statusColor = {
+        default: '#aaaaaa',
+        progress: '#0075ff',
+        complete: '#12B553',
+        error: '#FB4444',
+    };
+    render() {
+        return (hAsync(Host, { key: '2e2f7cf77bbc63dfb15910a3bc50ac45601020cd', style: {
+                '--progress-color': this.statusColor[this.status],
+                '--progress-percentage': `${this.percentage}%`,
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && hAsync("div", { key: '3e72a490e148886c59345e5ac3161f760e0f4e85', class: "sd-progress__label" }, this.label)));
+    }
+    renderBarProgress() {
+        return (hAsync("div", { class: `sd-progress__bar sd-progress__bar--${this.status}` }, hAsync("div", { class: ['sd-progress__bar__percent', this.percentage < 100 ? 'proceed' : ''].join(' ') }), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.percentage, "%"), hAsync("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.percentage, "%")));
+    }
+    renderSpinnerProgress() {
+        const radius = (this.size - this.strokeWidth) / 2; // 원의 반지름
+        const circumference = 2 * Math.PI * radius; // 원의 둘레
+        const offset = circumference - (this.percentage / 100) * circumference; // 진행률에 따른 offset
+        const progressBgSize = `${this.size}px`;
+        const progressSize = `${this.size / 2}px`;
+        return (hAsync("div", { class: `sd-progress__spinner sd-progress__spinner--${this.status}` }, hAsync("svg", { width: progressBgSize, height: progressBgSize }, hAsync("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: "#EEEEEE", "stroke-width": this.strokeWidth, fill: "transparent" }), hAsync("circle", { cx: progressSize, cy: progressSize, r: radius, stroke: this.statusColor[this.status], "stroke-width": this.strokeWidth, fill: "transparent", "stroke-dasharray": circumference, "stroke-dashoffset": offset, "stroke-linecap": "round", class: "transition-all duration-500" })), hAsync("strong", { class: "sd-progress__spinner__label" }, this.percentage, " %")));
+    }
+    static get style() { return sdProgressCss; }
+    static get cmpMeta() { return {
+        "$flags$": 768,
+        "$tagName$": "sd-progress",
+        "$members$": {
+            "type": [1],
+            "status": [1],
+            "percentage": [2],
+            "size": [2],
+            "strokeWidth": [2, "stroke-width"],
+            "label": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 class DropdownManager {
     static instance;
     activeDropdowns = new Set();
@@ -6037,11 +6090,11 @@ class SdSelectMultiple extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '8f2df6c0a3b6e8d2300a77bd84b993101824cae1', style: style }, hAsync("div", { key: '9587ca5bb88d7767b5f48344063deef220964027', class: {
+        return (hAsync(Host, { key: 'c569bb885003048b6ec22bfb0688c671a70a27d5', style: style }, hAsync("div", { key: '94b43199502f44f7d663981c320696c6e8cf968f', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'f00fa7d7c2cbc6f751cc89411b1d77037a950e3e', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'd4fd6929b78add118c01d7b52c1c1e0be9867924', class: "sd-select-multiple__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -6542,7 +6595,7 @@ class SdSelectOption {
         }
     };
     render() {
-        return (hAsync(Host, { key: 'f627f75ea5e3765390729eac31e02e78ca084e95' }, hAsync("div", { key: 'ce5f8aa53fb8ae3a3b165c5778aa352a99d0ddf8', class: {
+        return (hAsync(Host, { key: '57acf795fbb642249d9716fc8fa4123f2d939d2b' }, hAsync("div", { key: '6653deafa3142a3bf9b67290dae411c29fc38f41', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,
@@ -6628,7 +6681,7 @@ class SdSelectOptionGroup {
         }
     };
     render() {
-        return (hAsync("div", { key: '6365bd1ae57487d7bbccf25637770aedecc2bc6c', class: {
+        return (hAsync("div", { key: 'ab10e48405e8457f1319518f9790c5dd94d1b5e6', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -6637,10 +6690,10 @@ class SdSelectOptionGroup {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'b48606dad43a722f434df8b384e3c92332d59f94', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: '2c564c5480482ade27ebb0cb066cc3c971d1f8f2', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
+            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, hAsync("div", { key: 'e9b0636bc98818aa48b5d486c3e5b4c216b76046', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (hAsync("sd-checkbox", { key: 'b7495da88ddad187588569c64235ccc1697466fe', checked: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), hAsync("span", { key: '2175b4ec10bf631a419f5cfa439e0c24f6ccf5a7', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'bbb57f2a8c00e2bb56a4f6a5b68cb5d09d81d9c7', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), hAsync("span", { key: 'f8a51d2ea1a99ae17a1ba79fb6f802f0c2a27be1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (hAsync("span", { key: 'ee29e4503321462981c6d6fe497d70f271e5f814', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
     static get style() { return sdSelectOptionGroupCss; }
     static get cmpMeta() { return {
@@ -7070,20 +7123,20 @@ class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: '2a4473864df0253d22d03a7b1512d6261d2c5f1e' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: '48ba8d56f7ee68ac71bd7076c98f8e7081635de5', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: 'edb64ac6facd530f02a3c663a4d7e728270bb914', class: {
+        return (hAsync(Fragment, { key: '45dbef1d93b082f8fe42c003f997aa80ad297ee5' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-tooltip-portal", { key: '7357fe6678832a74c567b24e404d14d75a77b13f', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, hAsync("div", { key: '3add41a611cb55fddaae7733b6db9ec996561723', class: {
                 'sd-tooltip-menu': true,
                 [`sd-tooltip-menu--${this.type}`]: true,
                 [`sd-tooltip-menu--${this.placement}`]: true,
                 'sd-tooltip-menu--with-close': this.useClose,
                 [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, hAsync("i", { key: '2907f18d268eed0d0e70707b1fb113ca1b6ce1a6', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'fd6417e7cad6464f5830accca7842f9c2d5431ca', class: {
+            } }, hAsync("i", { key: 'f62cfc386831412cb958da88a41e0487be40d119', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'daab1b1028832d95fb05456b96981cdeb1e31c4e', class: {
                 [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), hAsync("div", { key: '30e7d57e6bdd47ca5da01c8e94e6d29cc174de58', class: "sd-tooltip-menu__content", ref: el => {
+            } })), hAsync("div", { key: 'ab7ca38aa68cf8279ff0d372651a4e26b217781c', class: "sd-tooltip-menu__content", ref: el => {
                 if (el && this.slotContent && !el.hasChildNodes()) {
                     el.appendChild(this.slotContent.cloneNode(true));
                 }
-            } }, !this.slotContent && hAsync("span", { key: '9e6afb40c06db772ed94fd90c73713a1134e2866' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '8679d07e7d2e027f4a96ebaecd64b1fac9ecf503', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: 'aa018b14eeeb08f872af25d93c0bd36708bf36e8', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '0a0d3c6c246adccdb9b31502f13a1189a0a94554', name: "close", size: "12", color: "#AAAAAA" })))))))));
+            } }, !this.slotContent && hAsync("span", { key: 'f5768e8b7e3033f64797aba77a504d57236e51e3' }, this.el.textContent)), this.useClose && (hAsync("div", { key: '94bdf692fabf190912a64d6051957031b2964ae5', class: "sd-tooltip-menu__close-button" }, hAsync("button", { key: '8826745fb1dab139358bc0d430d622abca333e5e', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '863f114251ec302425224a7385dd23292f7f6340', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get style() { return sdTooltipCss; }
     static get cmpMeta() { return {
@@ -7258,7 +7311,7 @@ class SdTooltipPortal {
         this.sdClose.emit();
     }
     render() {
-        return hAsync("slot", { key: '094d59498ba589963103957db54a7eae9e9771c4' });
+        return hAsync("slot", { key: '96e22fb7cd79afbef7bcb1a9b055e6a2bf54dd76' });
     }
     static get cmpMeta() { return {
         "$flags$": 777,
@@ -7292,6 +7345,7 @@ registerComponents([
   SdPagination,
   SdPopover,
   SdPortal,
+  SdProgress,
   SdSelect,
   SdSelectMultiple,
   SdSelectMultipleGroup,