@sellmate/design-system 1.0.21 → 1.0.23

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js

@@ -0,0 +1,384 @@
+import { h, } from "@stencil/core";
+import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
+import { BUTTON_FOCUS_RING_COLOR } from "../sd-button-v2/sd-button-v2.config";
+import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_BUTTON_MIN_WIDTHS, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_CONTENT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, getDropdownButtonPreset, isDropdownButtonName, } from "./sd-dropdown-button.config";
+export class SdDropdownButton extends BaseDropdownEvent {
+    constructor() {
+        super();
+    }
+    el;
+    name = 'primary_sm';
+    label = '';
+    items = [];
+    disabled = false;
+    isOpen = false;
+    itemIndex = -1;
+    triggerRef;
+    menuRef;
+    click;
+    dropDownShow;
+    handleOpenChange(isOpen) {
+        this.onDropdownToggle(isOpen);
+        this.dropDownShow.emit({ isOpen });
+        if (!isOpen) {
+            this.itemIndex = -1;
+        }
+    }
+    componentWillLoad() {
+        this.initializeEvent();
+    }
+    disconnectedCallback() {
+        this.cleanupEvent();
+    }
+    async sdOpen() {
+        if (this.disabled || this.items.length === 0)
+            return;
+        this.isOpen = true;
+    }
+    async sdClose() {
+        this.closeDropdown();
+    }
+    closeDropdown = () => {
+        this.isOpen = false;
+    };
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        if (this.el.contains(target))
+            return;
+        if (this.menuRef?.contains(target))
+            return;
+        this.closeDropdown();
+    }
+    handleDocumentKeydown(event) {
+        if (!this.isOpen)
+            return;
+        const targetKeys = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKeys.includes(event.key))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        switch (event.key) {
+            case 'ArrowDown':
+                this.itemIndex = this.getNextEnabledIndex(1);
+                break;
+            case 'ArrowUp':
+                this.itemIndex = this.getNextEnabledIndex(-1);
+                break;
+            case 'Enter':
+                if (this.itemIndex < 0)
+                    return;
+                this.selectItem(this.items[this.itemIndex]);
+                break;
+            case 'Escape':
+                this.closeDropdown();
+                break;
+        }
+    }
+    get resolvedConfig() {
+        if (!isDropdownButtonName(this.name)) {
+            throw new Error(`Invalid sd-dropdown-button name: ${this.name}`);
+        }
+        const config = DROPDOWN_BUTTON_CONFIG[this.name];
+        const preset = getDropdownButtonPreset(this.name);
+        return {
+            config,
+            preset,
+        };
+    }
+    getNextEnabledIndex(direction) {
+        const enabledIndices = this.items.reduce((acc, item, index) => {
+            if (!item.disabled) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        if (enabledIndices.length === 0) {
+            return -1;
+        }
+        const currentPosition = enabledIndices.indexOf(this.itemIndex);
+        if (currentPosition === -1) {
+            return direction === 1 ? enabledIndices[0] : enabledIndices[enabledIndices.length - 1];
+        }
+        const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
+        return enabledIndices[nextPosition];
+    }
+    toggleDropdown = (event) => {
+        event.stopPropagation();
+        if (this.disabled || this.items.length === 0) {
+            return;
+        }
+        this.isOpen = !this.isOpen;
+    };
+    selectItem(item, event) {
+        event?.stopPropagation();
+        if (!item || item.disabled) {
+            return;
+        }
+        this.click.emit(item.value);
+        this.closeDropdown();
+    }
+    getTriggerClasses(preset, size, disabled, isOpen) {
+        const classes = [
+            'sd-dropdown-button__trigger',
+            `sd-dropdown-button__trigger--${preset}`,
+            `sd-dropdown-button__trigger--${size}`,
+        ];
+        if (disabled) {
+            classes.push('sd-dropdown-button__trigger--disabled');
+        }
+        if (isOpen) {
+            classes.push('sd-dropdown-button__trigger--open');
+        }
+        return classes.join(' ');
+    }
+    getMenuItemClasses(isActive, isDisabled) {
+        const classes = ['sd-dropdown-button__menu-item'];
+        if (isActive) {
+            classes.push('sd-dropdown-button__menu-item--active');
+        }
+        if (isDisabled) {
+            classes.push('sd-dropdown-button__menu-item--disabled');
+        }
+        return classes.join(' ');
+    }
+    renderDropdown(preset) {
+        if (!this.isOpen || !this.triggerRef)
+            return null;
+        return (h("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
+                '--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
+                '--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
+                '--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
+                '--sd-dropdown-button-menu-border': PRESET_BORDER_COLORS[preset] === 'transparent'
+                    ? PRESET_DIVIDER_COLORS[preset]
+                    : PRESET_BORDER_COLORS[preset],
+            } }, this.items.map((item, index) => {
+            const isActive = this.itemIndex === index && !item.disabled;
+            const iconColor = item.disabled
+                ? DROPDOWN_DISABLED_CONTENT
+                : isActive
+                    ? PRESET_MENU_ITEM_ACTIVE_COLORS[preset]
+                    : PRESET_MENU_ITEM_COLORS[preset];
+            return (h("button", { type: "button", role: "menuitem", class: this.getMenuItemClasses(isActive, Boolean(item.disabled)), disabled: item.disabled, onClick: event => this.selectItem(item, event), onMouseEnter: () => {
+                    if (!item.disabled) {
+                        this.itemIndex = index;
+                    }
+                } }, item.icon && (h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: iconColor })), h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
+        }))));
+    }
+    render() {
+        const { config, preset } = this.resolvedConfig;
+        const chevronColor = this.disabled ? DROPDOWN_DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
+        return (h("div", { key: '93869c11681e1ebaa54ff64fb940a9a5ae6b10e1', class: "sd-dropdown-button" }, h("button", { key: 'e21f44d8b18ed969a30e37263d74327cae73b543', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+                '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
+                '--sd-dropdown-button-bg': config.color,
+                '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
+                '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
+                '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
+                '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
+                '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
+                '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
+                '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
+                '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
+            } }, h("span", { key: '561db14272548fc4eb9ffcf750894198180c0d57', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '954a689fc1387fd5b37964188c209049f21f94ba', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '41a603c6549fda954eca10081e2d4386c3284561', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, h("sd-icon", { key: 'f38cb3ee71cdcc11db5993d3aa96f7e1c23953d0', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: chevronColor }))), this.renderDropdown(preset)));
+    }
+    static get is() { return "sd-dropdown-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-dropdown-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-dropdown-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownButtonName",
+                    "resolved": "\"danger_md\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"primary_md\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
+                    "references": {
+                        "DropdownButtonName": {
+                            "location": "import",
+                            "path": "./sd-dropdown-button.config",
+                            "id": "src/components/sd-dropdown-button/sd-dropdown-button.config.ts::DropdownButtonName",
+                            "referenceLocation": "DropdownButtonName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'primary_sm'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownButtonItem[]",
+                    "resolved": "DropdownButtonItem[]",
+                    "references": {
+                        "DropdownButtonItem": {
+                            "location": "import",
+                            "path": "./sd-dropdown-button.config",
+                            "id": "src/components/sd-dropdown-button/sd-dropdown-button.config.ts::DropdownButtonItem",
+                            "referenceLocation": "DropdownButtonItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "itemIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "sdClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DropdownButtonValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "DropdownButtonValue": {
+                            "location": "import",
+                            "path": "./sd-dropdown-button.config",
+                            "id": "src/components/sd-dropdown-button/sd-dropdown-button.config.ts::DropdownButtonValue",
+                            "referenceLocation": "DropdownButtonValue"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropDownShow",
+                "name": "sdDropDownShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ isOpen: boolean }",
+                    "resolved": "{ isOpen: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "sdOpen": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdClose": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}

package/dist/collection/components/sd-field/sd-field.js

@@ -114,15 +114,15 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
+        return (h("div", { key: '9ed0e615761d5c76dff1e95318b131bde22cd376', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
+            } }, h("div", { key: '6d051479c9874f3c765d50096db80c73c4fc461b', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '64ea18d481f0ad689ed984cd40837717fb37a751', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && h("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '8e043b3e476e0d574612c892f6c8c0bca28c117f' }))), this.errorMsg && h("div", { key: '22d42bacdbdfe85dbe08395d21e59a06946986f5', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -91,15 +91,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', class: {
+        return (h("div", { key: '8d0b3002090064a062df3bc21e54fb8011a520ed', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '55ffb6c1b3ff502b555cb48a31301ac9b30701a4', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'b7755876e0f327d15a886a86592cd59bd3435202', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'e1e2004c64166eb2b611c48ca51cc793fb90434c', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: 'e58b89fa203a86286d088a7ec7b1be0f740b948a', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '42440a854a85aeed63f887b25fa13d9609202974', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '25bd48b058fcff917aa1ee13c9cd991c49ef4aa1', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '0a3c122382cab2148a88fbd4fdc9ff1f7cde757b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '628717309bf16c0906e9ac21ecbf14a416eea8d8', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '9d82107ff69909519d1a3051054c42370e6b181c', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '8c8dfeb9a82c4ca69e6ae88aa8f129c72d884b14', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '2f33d335a7cf00ace576aed610a0e77d711a5b10' });
+        return h("slot", { key: 'fe02da5ce55072c8fa313e467967f2a1c18f86bb' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-guide/sd-guide.js

@@ -47,9 +47,9 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: '2a7d3d040d3fbe7d0c22afc62d67a848fbae67d9', class: "sd-guide", style: {
+        return (h("div", { key: '69dc81c8fe0c5843e86709e72f0cdf3ecaf8c52a', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: 'e354fa7a48aacabbd7688f9546d71ec138b4a648', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '157583215cdba27ae493a07aaa3eb4a0e3923971', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: '6aaa8f4ee6f44225ee63ef740d7398e87207c0c0', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '9184936963f96e2537b3713bd5ee38d0c058c72b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'a1f653f7e40f6ad4e97dca82e10d4f03843469fd', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '561433ec3fcf6f9de4badd8e24ffaffbab4e62df', class: "sd-guide__popup__header" }, h("sd-icon", { key: '69aafb073fa680f8353deccb860320da083ff121', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '71f7fcb3068d572523c6bf53276e654feb1056f6', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '407db996ded71b9a5786b1e7967349517c7eb877', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: '254e03a9d2e4d36ca26a23158acc960dcfb90578', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '701a049ebcabd0b29fa74fac246cecdedace2022', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'e8f8efcbcbe29d51a29a8ca3803ed0a754a42531', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '5f54893503560535d6adedea41d81182c72b04e5', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '9747683a1123307a9e4214e0f4be63fd09af1fec', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '9fb06eaeae5fc0a805855b78b8d67583183f7a8c', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'ad4b7e1e5740bbd32877efc0a5614b4e657aca8a', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '5cdf73e175a51b13ee2c5408014de27a9650ac20', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'f02a8cf5ffe831d2a466e4357f7721c5622d7bee', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/collection/components/sd-icon/sd-icon.js

@@ -25,7 +25,7 @@ export class SdIcon {
     }
     render() {
         const IconComponent = Icons[this.name]?.[this.size];
-        return (h("i", { key: '1d6a48769c99bbfe9576016e24766b8c82ab570e', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '3fdb4195ef13656e79b402a4eae2fb0210fb3a97', color: this.resolvedColor })));
+        return (h("i", { key: '69b8654e2fd745282c1878306a5c464ba0995468', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: '64b00309d5ad7787c4fbf2c200719fd74062ccbd', color: this.resolvedColor })));
     }
     static get is() { return "sd-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-input/sd-input.js

@@ -85,7 +85,7 @@ export class SdInput {
         }
     };
     render() {
-        return (h("sd-field", { key: '87f02ba890fd952f89eb86d200318038137ba1a4', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '0bb5824067b33c178b1f60ececdccfe0a3d5f294', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '6f67712b4ca708ba511c57379a6b5118732f146a', name: "prefix" }), h("input", { key: 'b337a1161dedb41ed29a690fa963c0ac60dd0c79', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'bf45d9fd71551dc6a3bb96cdc44512796beee923', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'aed0a5d9115ba8b7601dc62423349bee1a9978c7', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '7f32214220ee8dc3e830597b84f846096b48b305', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("label", { key: '71b1f7ce70d475e28f1d9f29c9a49b3f2f548f53', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: 'c0c92d686b4cee0930716a47a701459c3afc41ff', name: "prefix" }), h("input", { key: '1cdacf0a76d118c0711bae5b1263650c195db838', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '7786756fca59c02dfb159f10e2925f73b64f0366', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '82b24cae340687d7412ec5210548ad92e33be744', name: "close", color: "grey_65", size: "16", class: "sd-input__clear-icon", onClick: async () => {
                 this.internalValue = '';
                 await this.formField?.sdValidate();
             } })))));

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: 'c3b3448fcc65334af3246f80157b195ec5595afe' }, h("svg", { key: '24701b65d17e56434cf46b72dbd5acec208b5dc8', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'e19c68c082348d36eecd05fa561eee91182349f2', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: '2b60d18fe2f1dc23d90c5552202cdea60a91b2c0' }, h("svg", { key: 'd8e8716433c206019384899897b052d28d486f92', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'c9aaffe398dd40ccea3a2d8a89cb880e3eeb5a6d', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-number-input/sd-number-input.js

@@ -240,17 +240,17 @@ export class SdNumberInput {
         const inputStyles = {
             textAlign: this.useButton ? 'center' : 'right',
         };
-        return (h("sd-field", { key: '7aa387eeb5850052e121931b3f8183373b4319aa', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: 'f5bbb6c76e32de4aefe59c6958a38e1a560f05c9', class: {
+        return (h("sd-field", { key: 'e72a01e264aa4d680aa740f5098e3be9bb7ac8ac', name: this.name, label: this.label, insideLabel: this.insideLabel, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), style: inputWidth }, h("label", { key: '3006df4eaf22ecf7e9ad330270623ba7cbbf9c9a', class: {
                 'sd-number-input': true,
                 [this.getInputStatus()]: true,
                 'sd-number-input--with-buttons': this.useButton,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'fc26b7cf0d121025c9a748b158640e03188d72d3', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: 'c9325ea7dd19c02fead55a0d63ac0b7b16143d08', class: "sd-number-input__buttons" }, h("button", { key: 'ec96811ce7046a3fe9506ca0635db97413d8283a', type: "button", class: {
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: this.inputStyle }, h("input", { key: 'e52177d9c7266a1630d9287fdc155f12a5dc7cca', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__input ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, style: inputStyles, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.useButton && (h("div", { key: '18f45963c22ee6a1cdd52e45b41191c3726328ce', class: "sd-number-input__buttons" }, h("button", { key: '73658fecb2300094b1880cae4595975b777b802a', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--decrement': true,
-            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '70311a7723356ecc88125042d366bf567b0b5a2a', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: 'b7086218dc98fec4287e4becb0d834634fd52055', type: "button", class: {
+            }, disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: 'd2b4d8eb6b7f5dd30ba704c7d7b35051a5b0df7b', name: "minus", size: 12, color: this.isDecrementDisabled() ? 'grey_45' : 'brilliantblue_70' })), h("button", { key: 'ddcd2255b7870657afbb6549cdc185a804aa3dbf', type: "button", class: {
                 'sd-number-input__button': true,
                 'sd-number-input__button--increment': true,
-            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'b945a1561978dc4bba1868fa57652e94a6bcfc34', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
+            }, disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '971098976698154e8e644a93265dc746177c2ce0', name: "add", size: 12, color: this.isIncrementDisabled() ? 'grey_45' : 'brilliantblue_70' })))))));
     }
     static get is() { return "sd-number-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-pagination/sd-pagination.js

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'feed08139c382f91539bc316a967ed1738529688', class: this.paginationClasses }, h("div", { key: '42c908d7a685f2acab29a94d040e4f4c513fff38', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '8ab0a0f2dfb17154eaba138aa0688606500be296', class: this.paginationClasses }, h("div", { key: '04b985f2d3e06ef35b18d6d375021499f36952f1', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '2be11ae773c0bce71ecaf53f99daff3f5b2d567d', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'c2ef87605487622bed06cac8d13d180f4af23e76', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-popover/sd-popover.js

@@ -30,11 +30,11 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '883bea0d5ef88bb63b4a1a2d778aedf0bce6f000' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'f38658d537cd8cebb84e579b02c73209e8a81d3a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '472702d7d51c08051670012fc2e930f41ad7f1b5', class: {
+        return (h(Fragment, { key: 'fae8880113285544053957bb096c6618dfddc7ec' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: '45323134dcbce4014492dde03c1416deda339ee1', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'c662820224d2c90bb806d2ac010cc95a53308b3a', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
-            } }, h("i", { key: '1895eba14b74f393c7221db83fdf97e9a8f3a1aa', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '4307eb8e750dc36cae5477b366a4ea08a59a5a45' })), h("div", { key: '840d94cf1d4e3c63346cd48a2d47c1c0b0633046', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'ede807dfdb2efc2a8bf8f89ef597965092c79211', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '613ea1b46810eec1958b735fc23811d66ff2ebf8', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '06712ed73687c0e99778d5fda6d75a4e07d815dd', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '20d628d8d31bd6464c26f3cf5ba894c5c3a2428f', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: 'cd1dcbe02ed55a25364e88621db5ab287eb7ed8e', name: "close", size: "12", color: "gery_55" }))))))));
+            } }, h("i", { key: '55bc21085df77a027d252d5c3ef6d665207c71f6', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'a9bb570b87481c0fe897e65ada655537dd4b8724' })), h("div", { key: '5f28d241157a9f5481fc7fa4e48fd00fac1def5a', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'cc1dcbe2703dca70004159aa9fe8b18b122d8dbc', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'f7b72df569c2dce9e6c85bcd9509e38ac9cbbb80', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'd01d2bc92e79454d747b2fd976bfeb431d4d90fe', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '9cf8cbd72d5bec64636b778ea0642d56c3229590', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '6df940385a9472e73b408cc51c647c98c95a9af7', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {