@sellmate/design-system 0.0.30 → 0.0.32

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
@@ -497,6 +520,10 @@ export namespace Components {
           * @default {}
          */
         "triggerStyle": SelectStyleProps['triggerStyle'];
+        /**
+          * @default false
+         */
+        "useAll": boolean;
         /**
           * @default false
          */
@@ -952,6 +979,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 +1145,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 +1498,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
@@ -1614,6 +1671,10 @@ declare namespace LocalJSX {
           * @default {}
          */
         "triggerStyle"?: SelectStyleProps['triggerStyle'];
+        /**
+          * @default false
+         */
+        "useAll"?: boolean;
         /**
           * @default false
          */
@@ -1858,6 +1919,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 +1949,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:8px;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();
@@ -5756,11 +5809,11 @@ class SdSelect extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '6e627f90abe0ae0a8f955918ccd2513a03b81c7a', style: style }, hAsync("div", { key: 'a0e8e608384d7dd343ba65f34a37d28ebe99cae0', class: {
+        return (hAsync(Host, { key: '51133eafc1c4b8cb79845c3b36abeb933d92bd9d', style: style }, hAsync("div", { key: 'cdd8fb1798088a7ea4e44ce921dcc652a455cc39', class: {
                 'sd-select': true,
                 'sd-select--open': this.isOpen,
                 'sd-select--disabled': this.disabled,
-            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: 'a313b94c77d3649b35ba47cc29e364e26902d70f', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, ref: el => (this.selectRef = el) }, this.renderLabel(this.label), hAsync("div", { key: '6e09cfbbb0807cbeff40a7dfe0a9d037a31e58bf', class: "sd-select__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label) {
         if (!label)
@@ -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)
@@ -6129,6 +6182,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     clearable = false;
     searchable = false;
     useCheckbox = false;
+    useAll = false;
     // props - custom styles
     containerStyle = {};
     triggerStyle = {};
@@ -6254,6 +6308,16 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             this.dropDownShow?.emit({ isOpen: this.isOpen });
         }
     };
+    handleAllOptionClick = (detail) => {
+        if (detail.isSelected) {
+            // 이미 선택된 옵션인 경우, 선택 해제
+            this.value = [];
+        }
+        else {
+            // 새로운 옵션 선택
+            this.value = [...this.filteredOptions.filter(opt => opt.type === 'item' && !opt.disabled)];
+        }
+    };
     handleOptionClick = (detail) => {
         const { option, event } = detail;
         event.stopPropagation();
@@ -6392,6 +6456,19 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             totalCount: children.length,
         };
     }
+    isAllOptionsSelected() {
+        const selectedOption = this.getSelectedOption();
+        return (selectedOption.length === this.options.filter(opt => !opt.disabled && opt.type === 'item').length);
+    }
+    getTriggerLabel() {
+        const selectedOption = this.getSelectedOption();
+        if (!selectedOption)
+            return '선택';
+        if (selectedOption.length === 0)
+            return this.placeholder;
+        const isAllChecked = this.isAllOptionsSelected();
+        return isAllChecked ? '전체' : selectedOption.map(option => option.label).join(', ');
+    }
     closeDropdown() {
         this.isOpen = false;
     }
@@ -6419,11 +6496,11 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             '--select-width': this.width || '200px',
             '--select-dropdown-height': this.dropdownHeight || '260px',
         };
-        return (hAsync(Host, { key: '25cb748a149def1b633f7e6baf77e55a57c6d43b', style: style }, hAsync("div", { key: '14fabf19488e6370612eb3f29fb97d0077ddb0f0', class: {
+        return (hAsync(Host, { key: '825a5e69af88a908c41c0c82bfb5fed4afeb9f5f', style: style }, hAsync("div", { key: '81827e04db3de7194162594db4d918b37e7bd3a2', 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), hAsync("div", { key: '4f762e4ab93da2cb1e684d85af9c3abf5f1304e4', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
+            }, style: this.containerStyle, ref: el => (this.selectRef = el) }, this.renderLabel(this.label, this.labelStyle), hAsync("div", { key: '23be24a0f971270b3e449cad4f56699f65716fb0', class: "sd-select-multiple-group__container" }, this.renderTrigger(), this.renderDropdown()))));
     }
     renderLabel(label, labelStyle) {
         if (!label)
@@ -6432,11 +6509,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
     }
     renderTrigger() {
         const selectedOption = this.getSelectedOption();
-        return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("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 && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
+        return (hAsync("div", { class: "sd-select-multiple-group__trigger", tabindex: this.disabled ? -1 : 0, onClick: this.handleTriggerClick, style: this.triggerStyle }, hAsync("span", { class: "sd-select-multiple-group__value" }, this.getTriggerLabel()), this.clearable && selectedOption?.length > 0 && !this.disabled && (hAsync("sd-icon", { key: "close-icon", name: "close", size: 10, color: "#888", class: "sd-select-multiple-group__clear", onClick: event => {
                 event.stopPropagation();
                 this.value = null;
             } })), hAsync("sd-icon", { key: "arrow-icon", name: "arrowDown", color: "#888", class: {
@@ -6461,14 +6534,15 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             }, onKeyDown: e => {
                 if (e.code === 'Enter')
                     e.stopPropagation();
-            } }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("sd-select-option-group", { option: option, index: index, isSelected: option.type === 'item'
+            } }, hAsync("sd-icon", { name: "search", size: 16, color: "#737373", slot: "prefix" })))), this.filteredOptions.length > 0 ? (hAsync(Fragment, null, this.useAll && (hAsync("sd-select-option-group", { option: { label: '전체 선택', value: 'all', type: 'all' }, index: 0, isSelected: this.value?.length ===
+                this.options.filter(opt => !opt.disabled && opt.type === 'item').length, isFocused: this.itemIndex === 0, optionStyle: this.optionStyle, onOptionClick: ({ detail, }) => this.handleAllOptionClick(detail), useCheckbox: this.useCheckbox, useIndicator: false })), this.filteredOptions.map((option, index) => (hAsync("slot", { name: `option-${option.value}` }, hAsync("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, }) => {
                 if (option.type !== 'item' && !this.useCheckbox) {
                     return;
                 }
                 this.handleOptionClick(detail);
-            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) }))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
+            }, useCheckbox: this.useCheckbox, ...(option.type !== 'item' && { countInfo: this.getChildrenOptions(option) }) })))))) : (hAsync("slot", { name: "option-placeholder" }, hAsync("div", { class: 'sd-select-multiple-group__option-placeholder', style: this.optionStyle }, this.optionPlaceholder))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -6493,6 +6567,7 @@ class SdSelectMultipleGroup extends BaseDropdownEvent {
             "clearable": [4],
             "searchable": [4],
             "useCheckbox": [4, "use-checkbox"],
+            "useAll": [4, "use-all"],
             "containerStyle": [16],
             "triggerStyle": [16],
             "dropdownStyle": [16],
@@ -6542,7 +6617,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,
@@ -6582,7 +6657,7 @@ class SdSelectOption {
     }; }
 }
 
-const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:28px;font-size:12px;line-height:20px}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{padding-left:12px;background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected.sd-select__option-group--item sd-checkbox .sd-checkbox__bg{border-color:white !important}";
+const sdSelectOptionGroupCss = "sd-select-option-group{display:block;height:fit-content}sd-select-option-group .sd-select__option-group{display:flex;padding:4px 12px;padding-left:12px;font-size:12px;line-height:20px;cursor:pointer}sd-select-option-group .sd-select__option-group.sd-select__option-group--group:not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup:not(.sd-select__option-group--use-checkbox){cursor:default !important}sd-select-option-group .sd-select__option-group.sd-select__option-group--group{background-color:#f5faff !important;color:#333333 !important;font-weight:700}sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup{padding-left:20px;background-color:#f9f9f9 !important;color:#333333 !important;font-weight:500}sd-select-option-group .sd-select__option-group.sd-select__option-group--item{padding-left:28px}sd-select-option-group .sd-select__option-group sd-checkbox__bg{border-color:#888888}sd-select-option-group .sd-select__option-group__label-wrapper{display:flex;width:100%;column-gap:8px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}sd-select-option-group .sd-select__option-group__label-wrapper sd-checkbox{flex-shrink:0}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group-label{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__option-group__count-indicator{width:fit-content;flex-shrink:0;font-size:12px;font-weight:500;color:#888888}sd-select-option-group .sd-select__option-group--focused{background-color:#e6f1ff}sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox),sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox){color:#0075ff;font-weight:700}sd-select-option-group .sd-select__option-group--disabled{color:#aaaaaa;cursor:not-allowed}sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled){background-color:#0075ff;color:white}sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg{border-color:white !important}";
 
 class SdSelectOptionGroup {
     constructor(hostRef) {
@@ -6628,7 +6703,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 +6712,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 +7145,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 +7333,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 +7367,7 @@ registerComponents([
   SdPagination,
   SdPopover,
   SdPortal,
+  SdProgress,
   SdSelect,
   SdSelectMultiple,
   SdSelectMultipleGroup,