@sellmate/design-system 1.0.22 → 1.0.25

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 
 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}`;
 
@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: '70ab9a558faf068cfc4eb0a5f6a29453ceedc6ec', class: {
+        return (index.h("div", { key: '7581caff61d1257d653b6f58b8d76c21225b3cc5', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -57,10 +57,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) }, index.h("div", { key: 'ca5dc0033231ab204a8688f98453742cdbde7d26', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: 'bba6cb9fe649f6eda82ba287f73d0142e02c53c2', value: 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) }, index.h("div", { key: 'ddb33f6afaa6bc6d6dd3dc494f6ec74b9c023a42', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '14f2c7fc347718d2909e5006bf2500a9a51b0a66', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: '7d03c080b7f5b92881389bfec787015a6ac55fa1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '7066453f92eac7549569db6854e3dc32515d80b9', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: '99415ed662cc2f8f29d31e3811eb4496f8fcac47', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'a3c7dc6455a94ecd4587f8b13b4d1f10e3b58819', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

package/dist/cjs/sd-tabs.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 
 const sdTabsCss = () => `sd-tabs{display:inline-block}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:4px;border-bottom:1px solid #0075FF}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:1px solid #CCCCCC;border-bottom:none;border-radius:4px 4px 0 0;background-color:#F6F6F6;color:#888888;font-weight:400;transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.3s}sd-tabs .sd-tabs__tab--selected{border-color:#0075FF;color:#0075FF;background-color:white}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:700}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:#0075FF;opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:#888888;opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:700;visibility:hidden;position:relative}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:400;transition:font-weight 0.2s ease}sd-tabs .sd-tabs--md .sd-tabs__tab{padding:12px 32px;font-size:12px;line-height:20px}sd-tabs .sd-tabs--sm .sd-tabs__tab{padding:8px 20px;font-size:12px;line-height:16px}sd-tabs .sd-tabs--sub{gap:32px;border-bottom:none}sd-tabs .sd-tabs--sub .sd-tabs__tab{border:none;border-radius:0;background-color:transparent;color:#222222;font-weight:400;padding:0 0 2px 0;position:relative}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;top:100%;left:0;right:0;height:1px;width:100%;background-color:#0075FF;opacity:0;transition:opacity 0.2s ease}sd-tabs .sd-tabs--sub .sd-tabs__tab::after{font-weight:400}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:#0075FF;background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::after{font-weight:700}`;
 
@@ -44,16 +44,14 @@ const SdTabs = class {
         }
         return classes.join(' ');
     }
-    getBadgeColors(tab) {
-        if (this.isTabSelected(tab)) {
-            return { bgColor: '#E6F1FF', textColor: '#0075FF' };
-        }
-        return { bgColor: '#E5E5E5', textColor: '#737373' };
+    getBadgeName(tab) {
+        const color = this.isTabSelected(tab) ? 'blue' : 'grey';
+        return `square_${this.size}_${color}`;
     }
     render() {
-        return (index.h("div", { key: '1b63c97e7b40d35ceadcc07da1087ee54d3c5f8f', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
-            const badgeColors = this.getBadgeColors(tab);
-            return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (index.h("sd-tag", { size: this.size, label: tab.badge.toString(), bgColor: badgeColors.bgColor, textColor: badgeColors.textColor, rounded: false }))));
+        return (index.h("div", { key: 'bc86d4c1775bed6c2d323c9446e2c50631afed7c', class: this.getContainerClasses() }, this.tabs.map((tab, index$1) => {
+            const badgeName = this.getBadgeName(tab);
+            return (index.h("div", { key: `tab-${index$1}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, index.h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && (index.h("sd-tag", { name: badgeName, label: tab.badge.toString() }))));
         })));
     }
     static get watchers() { return {

package/dist/cjs/sd-tag.cjs.entry.js

@@ -1,54 +1,112 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 
-const sdTagCss = () => `:host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}`;
-
-const TAG_COLORS = {
-    grey: 'bg-grey_20 text-grey_70',
-    red: 'bg-red_15 text-red_70',
-    orange: 'bg-orange_10 text-orange_65',
-    yellow: 'bg-yellow_10 text-yellow_70',
-    green: 'bg-green_15 text-green_75',
-    blue: 'bg-brilliantblue_20 text-brilliantblue_75',
-    darkblue: 'bg-oceanblue_15 text-oceanblue_70',
-    indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
+const TAG_SHAPES = ['square', 'pill'];
+const TAG_SIZES = ['sm', 'md', 'lg'];
+const TAG_COLORS = [
+    'grey',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'blue',
+    'darkblue',
+    'indigo',
+];
+const TAG_COLOR_CONFIG = {
+    grey: { background: '#EEEEEE', content: '#737373', icon: '#737373' },
+    red: { background: '#FCEFEF', content: '#FB4444', icon: '#FB4444' },
+    orange: { background: '#FEF1EA', content: '#FF6B00', icon: '#FF6B00' },
+    yellow: { background: '#FFF7DD', content: '#916C0D', icon: '#CA9611' },
+    green: { background: '#E8F9EF', content: '#00973C', icon: '#12B553' },
+    blue: { background: '#E6F1FF', content: '#0075FF', icon: '#0075FF' },
+    darkblue: { background: '#EAF5FE', content: '#006AC1', icon: '#006AC1' },
+    indigo: { background: '#EFF6FF', content: '#004290', icon: '#004290' },
+};
+const SQUARE_SIZE_CONFIG = {
+    sm: {
+        height: '20px',
+        paddingX: '6px',
+        gap: '4px',
+        fontSize: '11px',
+        fontWeight: '500',
+        iconSize: 12,
+        radius: '4px',
+    },
+    md: {
+        height: '24px',
+        paddingX: '8px',
+        gap: '4px',
+        fontSize: '12px',
+        fontWeight: '700',
+        iconSize: 16,
+        radius: '4px',
+    },
+    lg: {
+        height: '28px',
+        paddingX: '10px',
+        gap: '4px',
+        fontSize: '14px',
+        fontWeight: '700',
+        iconSize: 16,
+        radius: '5px',
+    },
 };
+const PILL_SIZE_CONFIG = {
+    sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
+    md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
+    lg: { ...SQUARE_SIZE_CONFIG.lg, radius: '999px' },
+};
+const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
+    const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
+    return [
+        `${shape}_${size}_${color}`,
+        {
+            shape,
+            size,
+            color,
+            ...sizeConfig,
+            ...TAG_COLOR_CONFIG[color],
+        },
+    ];
+}))));
+const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
+
+const sdTagCss = () => `sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:1}`;
+
 const SdTag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    get el() { return index.getElement(this); }
-    size = 'md';
-    color = 'grey';
-    rounded = false;
+    name = 'square_md_grey';
     label = '';
-    bgColor;
-    textColor;
-    getTagClasses() {
-        const classes = ['sd-tag', `sd-tag--${this.size}`];
-        if (this.rounded) {
-            classes.push('sd-tag--rounded');
-        }
-        if (this.color && !this.bgColor && !this.textColor) {
-            classes.push(TAG_COLORS[this.color]);
-        }
-        if (this.bgColor || this.textColor) {
-            classes.push('sd-tag--custom-color');
+    icon;
+    isLeft = true;
+    get resolvedConfig() {
+        if (!isTagName(this.name)) {
+            throw new Error(`Invalid sd-tag name: ${this.name}`);
         }
-        return classes.join(' ');
+        return TAG_CONFIG[this.name];
     }
-    renderContent() {
-        return [
-            index.h("span", { class: "sd-tag__content" }, index.h("slot", null, this.label)),
-        ];
+    renderIcon(color, size) {
+        if (!this.icon)
+            return null;
+        return index.h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
     }
     render() {
-        const tagClasses = this.getTagClasses();
-        return (index.h("span", { key: '9745415753fe657bf5e7e5ca9eb6e02f8c953bfd', class: tagClasses, style: {
-                '--tag-bg-color': this.bgColor,
-                '--tag-text-color': this.textColor,
-            }, "aria-label": this.label || 'tag' }, this.renderContent()));
+        const config = this.resolvedConfig;
+        const iconNode = this.renderIcon(config.icon, config.iconSize);
+        return (index.h("span", { key: '5f9ee005b146997dd13bb3e6a06680ff8574bd14', class: "sd-tag", style: {
+                '--sd-tag-background': config.background,
+                '--sd-tag-content': config.content,
+                '--sd-tag-height': config.height,
+                '--sd-tag-padding-x': config.paddingX,
+                '--sd-tag-gap': config.gap,
+                '--sd-tag-font-size': config.fontSize,
+                '--sd-tag-font-weight': config.fontWeight,
+                '--sd-tag-radius': config.radius,
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: 'b123ab6ac015db640e4dc3edc5e2cf90ec5e0ecf', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

package/dist/cjs/sd-toast.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 var resolveColor = require('./resolveColor-4RlaGD62.js');
 
 const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:20px;font-weight:400}sd-toast .sd-toast__link{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__close{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}sd-toast .sd-toast__close:hover{opacity:0.7}sd-toast .sd-toast__close:active{opacity:0.5}`;
@@ -49,10 +49,10 @@ const SdToast = class {
             background: resolveColor.resolveColor(colorTokens.background),
             text: resolveColor.resolveColor(colorTokens.text),
         };
-        return (index.h("div", { key: '8118f67a55a3080ea91ffdfbd929bbe3464ab044', style: {
+        return (index.h("div", { key: '16579a21c0eec78e609b0cf82fcf2d040b8b3388', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, index.h("div", { key: 'f05c16b0c8ef6de2d62161f80591cb3a82c24434', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'b16fee2031c4093c263229d2ef07ad8f6e69778b', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'cd8b4c4d9cbc329fdfc99236ca56a49658c0ca8c', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: '888748872d886745ace2ef8491d7098528df8a46', class: "sd-toast__content" }, index.h("span", { key: '31b285a6b6a03b833577b4a9fb860fd76e066cb6', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '61d1aacf70e7062abbedd2364474e7da990f485f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '94aa75ef25ee18f0577d5539337152d654dab5c1', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor.resolveColor('grey_95') } : {} })), this.useClose && (index.h("button", { key: 'db0b83f7030feb5459597156c2d25f3437b91904', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: 'a3aab6c19c32043182f2d05d2583271520458493', name: "close", size: 12, color: colors.text }))))));
+            } }, index.h("div", { key: '108e47983e1ad99ed462a4fa00c29aa9e3393b8b', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'd034c9aaafc272d51de96de6ccefe49208aba7e3', class: "sd-toast__icon" }, index.h("sd-icon", { key: '14b97c4cbe7134f67d919abcf4e10cf673dd909d', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: '1cecb89bdb19742a7df04625e8f070cd2c207b5e', class: "sd-toast__content" }, index.h("span", { key: '1daf2a2bea963b7b68c580b30c4c8fa2f3a26c8f', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '8f7961c2c14806aa1323e378f57d74e47614772c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.h("sd-button", { key: '89cba5e58ff368aea05130b799d903d4cf85b120', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor.resolveColor('grey_95') } : {} })), this.useClose && (index.h("button", { key: '0e7fc0737824b61166cbff82a410948ca1745842', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '82d203f6eb584cb04566e8f3b1bd7a86ca50bba4', name: "close", size: 12, color: colors.text }))))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 
 const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-height:0}.sd-toggle-button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:4px 12px;gap:6px;border-radius:14px;border:1px solid #888888;background-color:#FFFFFF;color:#737373;font-size:12px;line-height:20px;font-weight:400;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;white-space:nowrap;user-select:none;box-sizing:border-box}.sd-toggle-button--active{border-color:#0075FF;color:#0075FF}.sd-toggle-button--disabled{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888;cursor:not-allowed}.sd-toggle-button--disabled.sd-toggle-button--active{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888}.sd-toggle-button:hover:not(.sd-toggle-button--disabled):not(.sd-toggle-button--active){border-color:#737373}.sd-toggle-button:hover:not(.sd-toggle-button--disabled).sd-toggle-button--active{border-color:#005CC9;color:#005CC9}`;
 
@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '65bd84349d293e027829dc8a7e80c1bbee123b25', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: 'f03c1a1dd64d608766c0996539cb6422efa99ef7', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '174a62904591e559232574d207ff4ad9c0113ad8', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '7bbd96a0563a8cadcfb7ab9d8e1fb3767508d6bf', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 
 const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#CCCCCC;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075FF}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#BBDAFF}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#EEEEEE}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005CC9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#BBBBBB}`;
 
@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '96e1e542413ede219dddf64f80112c1267973507', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '301ea8516df99c351fc7162ef80db112778d55ad', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '7382cf219c544aec9169a69a07856948512d2ac1', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'f9d6c5d4e94f12a64c242026974d71b8b8b140c7', class: "sd-toggle__track" }, index.h("div", { key: '2798217a6e9766c0e6d3cc6ed333c54a0106d978', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '9a8a0221e093040e446bc193f682070aa1f95c6c', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '4a2e3c626bfa4e439676cc40df619bd284d0178a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '1eecfd810c17610604d6cf93c6f664690f17ff6a', class: "sd-toggle__label" }, this.label), index.h("div", { key: '9f082e2f6036e338f2afb6fb719b4ff8d3a01d99', class: "sd-toggle__track" }, index.h("div", { key: '1d8b1bd11b05091a368c681ead7e79a0e453d510', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/{tooltipArrow-CMyNLSC-.js → tooltipArrow-Mb2Dhc7T.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/collection/collection-manifest.json

@@ -13,7 +13,6 @@
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
     "components/sd-table/sd-table.js",
     "components/sd-tabs/sd-tabs.js",
-    "components/sd-tag/sd-tag.js",
     "components/sd-toast/sd-toast.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-button-v2/sd-button-v2.js",
@@ -38,6 +37,7 @@
     "components/sd-select/sd-select-search-input/sd-select-search-input.js",
     "components/sd-select-multiple/sd-select-multiple.js",
     "components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js",
+    "components/sd-tag/sd-tag.js",
     "components/sd-textarea/sd-textarea.js",
     "components/sd-toggle/sd-toggle.js",
     "components/sd-toggle-button/sd-toggle-button.js"

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

@@ -6,7 +6,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h("div", { key: 'eeb4866526fa9e628da7182d6caca317015d6452', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'b14add6e76ab27eba5883c641e0ffa840e170ba2', class: "sd-badge__dot" }), h("div", { key: 'a53d4d487a6c97f87189c555f0a95640186fdf93', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: 'a83ffeb7171c32bafc3312d95c9fed576d676a0d', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'b6d84b2391d0e03edcab957b4edf73c765c04c35', class: "sd-badge__dot" }), h("div", { key: 'f06b5639135d87d7346b46c90a28ddeb40b05c9f', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -62,13 +62,13 @@ export class SdButtonV2 {
         const iconOnly = !this.label && Boolean(this.icon);
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
         const iconColor = this.disabled ? DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
-        return (h("button", { key: 'f1c9355390568831fa0c4c7289e62e701e0174c2', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '9adec3868e5337822463a5a37a741ef146a081be', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.variant === 'primary' ? config.color : '#FFFFFF',
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: '2845fbd556f326db93a27b802faa96ec60345f63', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '5d90b15cbcd0c1cea10a5dc251fd13e6a0099fb0', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: iconColor })), this.label && h("span", { key: '76facbfe83402fd0e5b17c1b7d4132665d8aaf5b', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: '849c90886e77e792e4e34ef064352361a29664f0', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '5c5bc61ab43aa17124337a7107a3e6ab82f566ae', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: iconColor })), this.label && h("span", { key: 'e2d1a5ce465f07310a4d03966609baaf7e968b0e', class: "sd-button-v2__label" }, this.label))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'a4f5635186614df68acf04c502f804c9f0c77df5' }, h("div", { key: '99af2c33f69d069e108f7f122a6e7762ea918276', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: '287c27708b9b80a9f04bfff87abdb65022762a6d' }))));
+        return (h(Fragment, { key: '3999f64f54054b3a1662fac4aacf9f6898acb957' }, h("div", { key: '666b8e849b92a5e75d259ff079237911fd591cdd', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'dc8f4ae80e9aca7a0aecaed81f45d40e7df2c067' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -76,7 +76,7 @@ export class SdDatePicker {
         this.isOpen = false;
     };
     render() {
-        return (h("div", { key: '97baf5202e2702032b5d9035c5b07b3dafa658fa', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: 'bba605148eec6f88829bcfff21cb1ac6efae815d', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '4c927154407efd9319b56327d83ee2012206b216', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: 'edc06ceeead0cab9ee3b2394097838e03aeb8703', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: 'cb71ba6e5517afa0e1e0477599449101b21ece65', class: "sd-date-picker__menu" }, h("div", { key: 'bdace5b8e99cbd4271ba76dace05f2af4d059d37', class: "sd-date-picker__header" }, h("div", { key: '3fc557c6119af299b813610e9b6ef6cd9104a302', class: "year-nav" }, h("button", { key: '82b7928c460b6bb3a163cf576977d4694fa63fdc', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: 'b0eda3985494f99de52c85714b13ef45b90ef9db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '24245489b718b3fb15603e9da628651b1af8b752', class: "year-nav__current" }, this.currentYear), h("button", { key: '458570d7e08af35d2c467398b89a9cb9c200141f', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: '5f01f94d7499b0c79f2936249a295b92dfa1476d', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '5d1551a4149998430fd5c0262000c21e8de76a9b', class: "month-nav" }, h("button", { key: '0690296a789d67e5dc1b1ce7b882a261f1724a46', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: '3ed6809573e28c9a40a4f26331669ce66245c076', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '5ae4ed6249269ba5a1d24ab986ec7c371fa356f4', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '7bada1fba8abf6e483969cc5388cd333b03e8e19', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '559eec3f67ff8b47f601928d5bb9ca2064cb1c6a', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '5191a48970a3e9f044eaf4851e2e5d507763fe71', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'c124a70d9e1c3dd73c63c8ef3fd513a9cb6c24c8', class: "sd-date-picker__body" }, [
+        return (h("div", { key: 'cd2f9c240e1e67806d1d9334937a905330d29a1f', class: { 'sd-date-picker': true, 'sd-date-picker--disabled': this.disabled } }, h("sd-input", { key: '1d77404494bd1fadf15d82dfabecbf61b73e5da8', ref: el => (this.inputEl = el), value: this.value, label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '627b76b7d276cff34224a130bb2596ca6f2ff49e', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '9dd006a9051c22dd8084ae9cb72e82c9c0b9be2b', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.handleClose }, h("div", { key: '5090eb945c7241f3224b3d2c7a5a96221cc46c04', class: "sd-date-picker__menu" }, h("div", { key: 'fa127745062937dfe4f04773b7d6afa74d13bd7a', class: "sd-date-picker__header" }, h("div", { key: '7c59917872614d1351a3dfe3783017bd6bc6b75c', class: "year-nav" }, h("button", { key: '9e27d2d76ca72820d57c2d9ebc40fa842129da22', type: "button", name: "prev-year", title: "Previous Year", onClick: () => this.setCurrentYear(this.currentYear - 1) }, h("sd-icon", { key: '17c8f872b7cfb2825d4c9528b5838487b97529f0', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '41999c78367c90bc4d1d9bfdeb6e3d29d44df2c2', class: "year-nav__current" }, this.currentYear), h("button", { key: '52953ec66118afd480e7ce6207a551f18b61ac6d', type: "button", name: "next-year", title: "Next Year", onClick: () => this.setCurrentYear(this.currentYear + 1) }, h("sd-icon", { key: 'e740bcc2a23f4df850b4e2579ce0cae14419313c', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '7fac86c6405a3936a1f0bdb51e5ca61463ef463a', class: "month-nav" }, h("button", { key: '62e22a2063c7ea972bf74ea08af0d519a5250b3f', type: "button", name: "prev-month", title: "Previous       ", onClick: () => this.handleUpdateMonth('prev') }, h("sd-icon", { key: 'fa53cbb5f2e61a3b1f0807639ce2c81516a1ca57', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("span", { key: '57eb7eaf1e3a11ba69cf4ef4af9852541abd7902', class: "month-nav__current" }, this.currentMonth, "\uC6D4"), h("button", { key: '08a783b73efd7a5df2638df7c8bcac5411b2e642', type: "button", name: "next-month", title: "Next Month", onClick: () => this.handleUpdateMonth('next') }, h("sd-icon", { key: '4a5bb4f4e6f3105fc9fda008eb51a47efe606b81', name: "arrowRight", size: "12", color: "#CCCCCC" })))), h("div", { key: '8dd540a7188716446b2e9bcda707d7458a2ea817', class: "sd-date-picker__days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("div", { key: day, class: "day" }, day)))), h("div", { key: 'f2da8d2325cb2fb9cb89d9c93d850cefc62235bf', class: "sd-date-picker__body" }, [
             ...this.calendar.prevMonthDays,
             ...this.calendar.days,
             ...this.calendar.afterMonthDays,

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -155,10 +155,10 @@ export class SdDateRangePicker {
         this.setHoverDate(hoverDate);
     }
     render() {
-        return (h("div", { key: 'e0eaf7463e91d3afed6ff977deb20d122e837fd4', class: {
+        return (h("div", { key: '1862958ea2e972700ea83ed61f0285f09cf52c02', class: {
                 'sd-date-range-picker': true,
                 'sd-date-range-picker--disabled': this.disabled,
-            } }, h("sd-input", { key: '301a5133f5a6bcb5bd66fed546528808a96b822a', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: 'ef7e9e74957d994a2e7a374f849ef1a5f03fe501', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '0eb793bbc67d0da80bfdbb9d5e8c89857a9bd13d', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: '6e7f6d3c0ba5d60cec929ff87f2b16c6fd1123ae', class: "sd-date-range-picker__menu" }, h("div", { key: 'bbc3b2117e226e86ad18e90d9549dfa33b8faa18', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'e5246cbd684096c113a9568d42a4a86555fd55b0', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: '84281ab72847d7fe9352be583465b810854f2cfb', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '9d9394eea9a82bdcdc7918af50e98909610ab5e2', class: "header-label" }, this.prevYear), h("button", { key: '6f05a7477293b129561b1bdaa5fca46224f41af9', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '746bc40e5d0bb72e9aa712012d411f20b459b80a', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '96a2c1674152f5ee31b29734b1471940b4d0f4b4', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
+            } }, h("sd-input", { key: '808670f22b59401c0125dd1191a6180cc6f72799', ref: el => (this.inputEl = el), value: !!this.dateRange[0] ? `${this.dateRange[0]} ~ ${this.dateRange[1]}` : '', label: this.label, "inside-label": true, readonly: true, disabled: this.disabled, placeholder: this.placeholder, inputClass: "sd-date-range-picker__input", onClick: () => this.openMenu() }, h("sd-icon", { key: '123e8beb77c3fceaaa3a8d994f8a8539fe35d317', slot: "prefix", name: "date", size: "16", color: this.disabled ? 'grey_65' : 'grey_70', class: "date-icon", onClick: () => this.openMenu() })), this.isOpen && (h("sd-portal", { key: '448c174030598565f910df316002d78bdfec3f89', open: this.isOpen, parentRef: this.inputEl, onSdClose: this.closeMenu }, h("div", { key: 'b5cf493587c7831e59a6156df87cb56be6bd585b', class: "sd-date-range-picker__menu" }, h("div", { key: 'c044d5377d0d88affecaa61eec2a2239b87158d8', class: "sd-date-range-picker__header mb-16pxr flex flex-nowrap items-center justify-center" }, h("button", { key: 'c497891fe1d06b8f6c1a79000edc0e4f4fd79735', type: "button", name: "prev", title: "Previous", onClick: () => this.setPrevYear(this.prevYear - 1) }, h("sd-icon", { key: 'ad899e9daec0752b744bc73e9cbd99c6a731b7db', name: "arrowLeft", size: "12", color: "#CCCCCC" })), h("div", { key: '595ac699adc90e8b15775ce47a2cda8bbc2f5c25', class: "header-label" }, this.prevYear), h("button", { key: '684ce75f14b08cd57ce6f019a1dfb3ab384b0c11', type: "button", name: "next", title: "Next", onClick: () => this.setPrevYear(this.prevYear + 1) }, h("sd-icon", { key: '31dde7526d0ee3e7abf965eea6f825d557e7c745', name: "arrowRight", size: "12", color: "#CCCCCC" }))), h("div", { key: '3e70334c95d29f302f2dc6d1cb7fbb3603c74a48', class: "sd-date-range-picker__body" }, [this.prevCalendar, this.nextCalendar].map((calendar, index) => (h(Fragment, null, index === 1 && h("div", { class: "separator" }), h("div", { key: index, class: "calendar-container" }, h("div", { class: "calendar-header" }, h("button", { type: "button", name: "month", title: "Month", class: index === 0 ? 'header-button-prev' : 'header-button-next', onClick: () => this.updateYearMonth(index === 0 ? 'prev' : 'next') }, h("sd-icon", { name: index === 0 ? 'arrowLeft' : 'arrowRight', size: "12", color: "#CCCCCC" })), index === 0
             ? `${this.prevYear}.${String(this.prevMonth).padStart(2, '0')}`
             : `${this.nextYear}.${String(this.nextMonth).padStart(2, '0')}`), h("div", { class: "calendar-days" }, ['일', '월', '화', '수', '목', '금', '토'].map(day => (h("sd-date-box", { key: day, date: day, disabled: true, class: "day" })))), h("div", { class: "calendar-body mt-12pxr grid grid-cols-7 gap-y-8pxr" }, [...calendar.prevMonthDays, ...calendar.days, ...calendar.afterMonthDays].map((day, idx) => (h("sd-date-box", { key: `prev${day}_${idx}`, date: !day ? '' : Number(day), selected: this.dateRange.some(date => date === this.formatDate(index, Number(day))), type: this.getDateBoxType(this.formatDate(index, Number(day))), isToday: today === this.formatDate(index, Number(day)), disabled: !day ? true : this.isDisabledDate(this.formatDate(index, Number(day))), inRange: this.isDateInRange(this.formatDate(index, Number(day))), isStartDate: this.dateRange[0] === this.formatDate(index, Number(day)), isEndDate: this.dateRange[1] === this.formatDate(index, Number(day)), onSdClick: () => this.handleDateClick(index, Number(day)), onSdMouseOver: () => this.handleDateHover(index, Number(day)) }))))))))))))));
     }

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

@@ -119,9 +119,10 @@ sd-dropdown-button {
 }
 
 .sd-dropdown-button__menu {
+  position: relative;
   display: grid;
   width: max-content;
-  min-width: max-content;
+  min-width: var(--sd-dropdown-button-menu-min-width, max-content);
   max-width: calc(100vw - 24px);
   padding: 4px 0;
   border: 0;

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

@@ -146,7 +146,8 @@ export class SdDropdownButton extends BaseDropdownEvent {
     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: {
+        return (h("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, h("div", { style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
+                '--sd-dropdown-button-menu-min-width': `${this.triggerRef.offsetWidth}px`,
                 '--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],
@@ -165,12 +166,12 @@ export class SdDropdownButton extends BaseDropdownEvent {
                         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: '0bd454e599c8eb56b88f63a5f74e1d9db4b568f9', class: "sd-dropdown-button" }, h("button", { key: '804dd19dc0d49969e89d0742e71f61fe610e3f3d', 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: {
+        return (h("div", { key: '23f01551d932b3840efc4554d9bf2520a4bd8f81', class: "sd-dropdown-button" }, h("button", { key: 'd8d736e5b6abe0e8870c01e05c55b03beb333be5', 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],
@@ -181,7 +182,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--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: '038dd3ad8c7c07d3ebb435a6fec27dd31b8fdba0', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'c5c2c0fffa200a4772d7e448e1a1b95745be4faa', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'a6f1db25929c10b9dc9ccbae2655eed3c67dff22', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, h("sd-icon", { key: '4c1533a7efd5a7d695e460bad9dfc2b8a7fe5740', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: chevronColor }))), this.renderDropdown(preset)));
+            } }, h("span", { key: '7c453f8d427a35553c60372dcef10b7b8561bad5', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '689127d4360e17cecdd8b6233d09113ac22a5e7d', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '9a61c4e2d8622462d065fd61002a503965eaec6b', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, h("sd-icon", { key: 'df084b6ed0b0824fb62e9cfe5e8cf07e74509205', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: chevronColor }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -114,15 +114,15 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: '83d20191373b759f18d25e25330ead65217dea4f', 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: '2f04e19997c077c32843173c85dc04840f8fa0f6', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'c7fa5c334cd4dc0b99919850b3059a35a77ea5c6', 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: '15f7bd40ca6ed1667f97f6362be914e203c491af' }))), this.errorMsg && h("div", { key: 'd940bca4d3074e8051bc5392aad36be4c58f88af', 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: 'dfdb1f7cc4793c23cfb1ae97464981833263421e', 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: 'bd4a072a517391b63116de1561aaf6606b1a8343', 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: '12280a64236d3fd9b63a9d15be11426efdd81629', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '935a7d98ee034d59f16b410eb1495cd009ce6024', 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: '08f38161be5d1754b4f5b1bba185a29976ffd1dd', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'db6edfa98b3832276b320a6f3b4e195cfaeff4d6', 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: 'd8bdd90d00b52153d1144bbea871ace4888e37e4' });
+        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: '3e6914fc5c99e8f95d5ed613ddd61271bc4e91f9', 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: 'b8e5be2cecec423cb2695c47c9493281c867dbde', 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: '7d87b81704d2912f9a4bbe22ff702063da9ca0ff', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'd34d55e52ecb3b0a72356dcd86c2127217da4af5', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '396bf4845c0e9167440c623c876f895705b973e9', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6a678e322df5d9daffd09188daebbbcc0e757ed9', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: '8b4abeac25a09b1eb8ee8285d2afff9a0a470c6c', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'b6216567fa83cf131e97c10f2b9f827b13f660a3', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '5a87da148989c89e196fee9a96bbb51e516dca4d', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'a4ebb25ecef588ca5367006adb6aaf446fbd59a9', 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: '2c1ef942e674d6dc85911f9a87c6859e0e86a706', class: this.getIconClasses(), style: this.iconStyle }, h(IconComponent, { key: 'fa1bc7cd1cf4dc5ec2565f5bbfe65e8137673204', 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: '757bf7b330f93ec9cd344098bdf124b999e04bb5', 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: '2dde85e905d77bb6337a2ad10a9f0f872fed5e8a', class: "sd-input__content", style: { width: '100%' } }, h("slot", { key: '20f47646ca476bf6ca6412ebb9e6aac0c72e7eab', name: "prefix" }), h("input", { key: 'a4f4f1594c80a8d834db7d6125110b4c65ad9906', 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: '35c7c173d72cbc295ad8f6e12f94bfe96e9f98d1', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: '82bf96b1a01516e0a7ea0dd735509511aa8a0e05', 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: '1a4edb8be9cc83ab900cd615ee30958d9822e98b' }, h("svg", { key: '634070026b58303bf3423b10f37ed6603179b9b1', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'fda3f7e4f787176f6030e19a3f2c1dd59326d35a', 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() {