@sellmate/design-system 1.0.21 → 1.0.22

package/dist/esm/sd-dropdown-button.entry.js

@@ -0,0 +1,272 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-C_an1PQ3.js';
+import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
+import { B as BUTTON_CONFIG, g as getPresetName, c as PRESET_BORDER_COLORS$1, P as PRESET_CONTENT_COLORS$1, d as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button-v2.config-BWmcscrt.js';
+import { b as buttonTokens } from './component.button-Dc4UTGgQ.js';
+
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	text: {
+		secondary: "#333333",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	color: color
+};
+
+const UNSUPPORTED_DROPDOWN_BUTTON_NAMES = new Set([
+    'neutral_xs',
+    'neutral_sm',
+    'neutral_md',
+]);
+const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg') && !UNSUPPORTED_DROPDOWN_BUTTON_NAMES.has(name));
+const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
+const DROPDOWN_BUTTON_MIN_WIDTHS = {
+    xs: buttonTokens.dropdown.xs.minWidth,
+    sm: buttonTokens.dropdown.sm.minWidth,
+    md: buttonTokens.dropdown.md.minWidth,
+};
+const PRESET_HOVER_BACKGROUNDS = PRESET_HOVER_BACKGROUNDS$1;
+const PRESET_CONTENT_COLORS = PRESET_CONTENT_COLORS$1;
+const PRESET_BORDER_COLORS = PRESET_BORDER_COLORS$1;
+const PRESET_DIVIDER_COLORS = {
+    primary: buttonTokens.brand.strong.dropdown.divider,
+    secondary: buttonTokens.brand.subtle.dropdown.divider,
+    primary_outline: PRESET_BORDER_COLORS.primary_outline,
+    neutral: buttonTokens.neutral.outline.border,
+    neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
+    danger: buttonTokens.danger.strong.dropdown.divider,
+    danger_outline: PRESET_BORDER_COLORS.danger_outline,
+};
+const MENU_ITEM_COLOR = systemTokens.color.text.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.text.inverse;
+const PRESET_MENU_ITEM_COLORS = {
+    primary: MENU_ITEM_COLOR,
+    secondary: MENU_ITEM_COLOR,
+    primary_outline: MENU_ITEM_COLOR,
+    neutral: MENU_ITEM_COLOR,
+    neutral_outline: MENU_ITEM_COLOR,
+    danger: MENU_ITEM_COLOR,
+    danger_outline: MENU_ITEM_COLOR,
+};
+const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS = {
+    primary: MENU_ITEM_ACTIVE_BACKGROUND,
+    secondary: MENU_ITEM_ACTIVE_BACKGROUND,
+    primary_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+    neutral: MENU_ITEM_ACTIVE_BACKGROUND,
+    neutral_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+    danger: MENU_ITEM_ACTIVE_BACKGROUND,
+    danger_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+};
+const PRESET_MENU_ITEM_ACTIVE_COLORS = {
+    primary: MENU_ITEM_ACTIVE_COLOR,
+    secondary: MENU_ITEM_ACTIVE_COLOR,
+    primary_outline: MENU_ITEM_ACTIVE_COLOR,
+    neutral: MENU_ITEM_ACTIVE_COLOR,
+    neutral_outline: MENU_ITEM_ACTIVE_COLOR,
+    danger: MENU_ITEM_ACTIVE_COLOR,
+    danger_outline: MENU_ITEM_ACTIVE_COLOR,
+};
+const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.bg.disabled;
+const DROPDOWN_DISABLED_CONTENT = buttonTokens.content.disabled;
+const DROPDOWN_DISABLED_BORDER = buttonTokens.border.disabled;
+const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
+const getDropdownButtonPreset = (value) => getPresetName(value);
+
+const sdDropdownButtonCss = () => `sd-dropdown-button{display:inline-flex;width:fit-content;height:fit-content}.sd-dropdown-button{display:inline-flex;position:relative}.sd-dropdown-button__trigger{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-dropdown-button-bg:#025497;--sd-dropdown-button-bg-hover:#004177;--sd-dropdown-button-border:transparent;--sd-dropdown-button-content:#ffffff;--sd-dropdown-button-divider:#006ac1;--sd-dropdown-button-accent:#006ac1;--sd-dropdown-button-min-width:106px;--sd-dropdown-button-disabled-bg:var(--sd-button-bg-disabled, $grey_30);--sd-dropdown-button-disabled-content:var(--sd-button-content-disabled, $grey_65);--sd-dropdown-button-disabled-border:var(--sd-button-border-disabled, $grey_45);display:inline-flex;align-items:stretch;justify-content:space-between;min-width:var(--sd-dropdown-button-min-width);min-height:var(--sd-dropdown-button-height);padding:0;border:var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);border-radius:var(--sd-button-radius-default, 4px);background:var(--sd-dropdown-button-bg);color:var(--sd-dropdown-button-content);cursor:pointer;box-sizing:border-box;font-family:var(--sd-dropdown-button-font-family);font-size:var(--sd-dropdown-button-font-size);font-weight:var(--sd-dropdown-button-font-weight);line-height:1;text-decoration:var(--sd-dropdown-button-text-decoration);transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;white-space:nowrap}.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled){background:var(--sd-dropdown-button-bg-hover)}.sd-dropdown-button__trigger:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-dropdown-button-accent)}.sd-dropdown-button__trigger--xs{--sd-dropdown-button-height:var(--sd-button-xs-height, 24px);--sd-dropdown-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-dropdown-button-gap:var(--sd-button-xs-gap, 4px);--sd-dropdown-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none)}.sd-dropdown-button__trigger--sm{--sd-dropdown-button-height:var(--sd-button-sm-height, 28px);--sd-dropdown-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-dropdown-button-gap:var(--sd-button-sm-gap, 6px);--sd-dropdown-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-dropdown-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none)}.sd-dropdown-button__trigger--md{--sd-dropdown-button-height:var(--sd-button-md-height, 34px);--sd-dropdown-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-dropdown-button-gap:var(--sd-button-md-gap, 8px);--sd-dropdown-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-dropdown-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-dropdown-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-dropdown-button-text-decoration:var(--sd-button-md-typography-text-decoration, none)}.sd-dropdown-button__trigger--disabled{border-color:var(--sd-dropdown-button-disabled-border);background:var(--sd-dropdown-button-disabled-bg);color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider{background:var(--sd-dropdown-button-disabled-border)}.sd-dropdown-button__trigger-label,.sd-dropdown-button__trigger-icon{display:inline-flex;align-items:center;justify-content:center}.sd-dropdown-button__trigger-label{flex:1 1 auto;min-width:0;padding:0 var(--sd-dropdown-button-padding-x)}.sd-dropdown-button__trigger-divider{align-self:stretch;width:1px;height:auto;background:var(--sd-dropdown-button-divider);opacity:0.9}.sd-dropdown-button__trigger-icon{flex:0 0 auto;min-width:calc(var(--sd-dropdown-button-height) - 2px);padding:0 calc(var(--sd-dropdown-button-gap) + 2px)}.sd-dropdown-button__menu{display:grid;width:max-content;min-width:max-content;max-width:calc(100vw - 24px);padding:4px 0;border:0;border-radius:4px;background:#FFFFFF;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);box-sizing:border-box;overflow:hidden}.sd-dropdown-button__menu-item{display:inline-flex;align-items:center;gap:8px;min-height:28px;width:100%;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--sd-dropdown-button-menu-item-color);cursor:pointer;box-sizing:border-box;font:inherit;text-align:left;transition:background-color 0.15s ease, color 0.15s ease}.sd-dropdown-button__menu-item--active{background:var(--sd-dropdown-button-menu-item-active-bg);color:var(--sd-dropdown-button-menu-item-active-color)}.sd-dropdown-button__menu-item--disabled{color:var(--sd-dropdown-button-disabled-content);cursor:not-allowed}.sd-dropdown-button__menu-item-icon{flex:0 0 auto}.sd-dropdown-button__menu-item-label{display:inline-flex;align-items:center;min-width:0;white-space:nowrap;font-size:12px}`;
+
+const SdDropdownButton = class extends BaseDropdownEvent {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.click = createEvent(this, "sdClick");
+        this.dropDownShow = createEvent(this, "sdDropDownShow");
+    }
+    get el() { return getElement(this); }
+    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: '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: {
+                '--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: '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)));
+    }
+    static get watchers() { return {
+        "isOpen": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+SdDropdownButton.style = sdDropdownButtonCss();
+
+export { SdDropdownButton as sd_dropdown_button };

package/dist/esm/sd-file-picker.entry.js

@@ -98,15 +98,15 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', class: {
+        return (h("div", { key: 'dfdb1f7cc4793c23cfb1ae97464981833263421e', 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: '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: {
                 '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: '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))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -53,9 +53,9 @@ const SdGuide = class {
     };
     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: '3e6914fc5c99e8f95d5ed613ddd61271bc4e91f9', 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: '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))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -36,11 +36,11 @@ const SdPopover = class {
         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: '4c256f17bc8601f889d18e2b8ee9ce5b4436b75e' }, 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: 'd1a8ef964dc6b9458b47d2d2e0d1eb25662e1537', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: '1aef778cbd469b16fe145957ea05c0ccbc2af8e7', 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: 'ff8f07f418d3bdcaf15b7e058158b91bd1cd2185', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '9b1fb0577a5dcdf54ec1cc60935a9c3c1aa8319c' })), h("div", { key: '0bfd33f6dde24fcdca635cbee04d2bc618f15185', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'de381d79af2f5d976e5cbccf5ed2b60aae9e6f26', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '316f3398861cc9e54f5c16bd08c7b45422857ae1', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '2466d39c9105310821a509cc8d493d34b27bbb7d', 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: 'd9cf295dfe0a20e9f79f371292520d9c757df55d', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '3ecc02bbfc890b1f66c57160041882c27153e44b', name: "close", size: "12", color: "gery_55" }))))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -39,10 +39,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: '43da9dac67e760bfe53b8db11c27eef7ef0d8b3b', style: {
+        return (h("div", { key: 'a11cc2a22ad1628d63882ca1e5f7f1e3715ba719', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'af4b1c44f655546fede8ad548bddc6afb7810d2b', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: 'dbc62a8fa4039127356f8b734482e1d0eb26c22b', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

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

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-C_an1PQ3.js';
-import { B as BaseDropdownEvent, n as nanoid, S as SelectKeyboardNavigation } from './select-keyboard-navigation-D8-D-mJX.js';
+import { n as nanoid, S as SelectKeyboardNavigation } from './select-keyboard-navigation-xxEHPVkL.js';
+import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 
 const sdSelectMultipleGroupCss = () => `.sd-select-multiple-group__dropdown{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-select-multiple-group__dropdown::-webkit-scrollbar{opacity:0;background:#E5E5E5}.sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal{height:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar:vertical{width:8px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb{height:80px;background-color:#CCCCCC;border-radius:4px}.sd-select-multiple-group__dropdown::-webkit-scrollbar-track{background-color:transparent}.sd-select-multiple-group__dropdown .sd-select-multiple-group__option-placeholder{height:48px;display:flex;align-items:center;padding:8px 16px;font-size:12px;line-height:0;text-align:left;color:#888888}sd-select-multiple-group{display:inline-flex;flex-flow:column nowrap;width:fit-content;height:fit-content}sd-select-multiple-group:focus,sd-select-multiple-group:focus-visible,sd-select-multiple-group:focus-within{outline:none !important}sd-select-multiple-group .sd-select-multiple-group{width:100%}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger{padding:4px 20px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__trigger .sd-select-multiple-group__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease}sd-select-multiple-group .sd-select-multiple-group .sd-select-multiple-group__arrow--open{transform:rotate(180deg)}.sd-select-multiple-group__dropdown{width:var(--select-width, 200px);max-height:var(--select-dropdown-height, 260px);padding-bottom:2px;background-color:white;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);border-radius:4px;overflow-y:auto;color:#333333;opacity:0.5;transition:opacity 0.15s ease-in}.sd-select-multiple-group__dropdown--ready{opacity:1}`;
 

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

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, a as getElement, h } from './index-C_an1PQ3.js';
-import { B as BaseDropdownEvent, n as nanoid, S as SelectKeyboardNavigation } from './select-keyboard-navigation-D8-D-mJX.js';
+import { n as nanoid, S as SelectKeyboardNavigation } from './select-keyboard-navigation-xxEHPVkL.js';
+import { B as BaseDropdownEvent } from './base-dropdown-event-CRdYeSBK.js';
 
 const sdSelectMultipleCss = () => `sd-select-multiple{display:inline-flex;flex-flow:column nowrap;height:fit-content}sd-select-multiple *:focus,sd-select-multiple *:focus-visible,sd-select-multiple *:focus-within{outline:none !important}sd-select-multiple .sd-select-multiple{width:100%}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger{padding:4px 28px 4px 12px;display:flex;width:100%;align-items:center}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px;font-size:12px;font-weight:400;text-align:left}sd-select-multiple .sd-select-multiple .sd-select-multiple__trigger .sd-select-multiple__clear{margin:0 4px;width:8px;height:8px;background-color:transparent;outline:none;border:none}sd-select-multiple .sd-select-multiple__arrow{position:absolute;top:8px;right:8px;width:12px;height:12px;color:#888888;transition:transform 0.3s ease;margin-left:8px}sd-select-multiple .sd-select-multiple__arrow--open{transform:rotate(180deg)}`;
 
@@ -149,7 +150,7 @@ const SdSelectMultiple = class extends BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (h("sd-field", { key: 'e445d2c3f80d78be0e74b1f54371eb27d9c316e8', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: '9fad0ed744cafb9e1e5f16ee413f36edd8f2c1f3', class: {
+        return (h("sd-field", { key: '9f78c7a47f580ba6d64fbc4a69e2f1f72f30e66f', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, useLabelRequired: this.useLabelRequired, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, h("div", { key: 'fab43f26f83788991067096f8574421ddeb0a829', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

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

@@ -46,7 +46,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (h("div", { key: '8e88aacd2c3122a563fcf78bcbe9731b6a29d8c5', class: {
+        return (h("div", { key: '70ab9a558faf068cfc4eb0a5f6a29453ceedc6ec', class: {
                 'sd-select__option-group': true,
                 'sd-select__option-group--selected': !!this.isSelected,
                 'sd-select__option-group--disabled': !!this.option.disabled,
@@ -55,10 +55,10 @@ const SdSelectOptionGroup = class {
                 'sd-select__option-group--group': this.option.type === 'group',
                 'sd-select__option-group--subgroup': this.option.type === 'subgroup',
                 'sd-select__option-group--item': this.option.type === 'item',
-            }, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), style: this.optionStyle, "data-index": this.index, onClick: event => this.handleClick(this.option, this.isSelected, event) }, h("div", { key: 'be4bc7f2867ea5c86505bc9284ac3de46f7077f9', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: '00063ab3a6f1d4f44671ac82dd05524968bec668', 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) }, h("div", { key: 'ca5dc0033231ab204a8688f98453742cdbde7d26', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (h("sd-checkbox", { key: 'bba6cb9fe649f6eda82ba287f73d0142e02c53c2', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), h("span", { key: '802c908d44bf1c0db5d64bf4c8d4bab4ebe2b87c', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: 'efd26a2d6e4e2662410de3755b70a2a2585ad0c4', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), h("span", { key: '7d03c080b7f5b92881389bfec787015a6ac55fa1', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (h("span", { key: '7066453f92eac7549569db6854e3dc32515d80b9', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();

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

@@ -39,7 +39,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '65bd84349d293e027829dc8a7e80c1bbee123b25', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: 'f03c1a1dd64d608766c0996539cb6422efa99ef7', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -35,7 +35,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'c0fcd12c231fdb995b5edae756157c58b352fd0f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'e50042ae04830f4c276d8140725ab62cc2d0490d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '99f9506a2dcea8cfd85aabf6b71243c116a2bf11', class: "sd-toggle__label" }, this.label), h("div", { key: '424e1ae78d5684051bd7a2b3ba89f6760f773f1c', class: "sd-toggle__track" }, h("div", { key: '29aab89e58022ce22f026fb694bb9b1e4531d8cf', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: '96e1e542413ede219dddf64f80112c1267973507', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '301ea8516df99c351fc7162ef80db112778d55ad', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '7382cf219c544aec9169a69a07856948512d2ac1', class: "sd-toggle__label" }, this.label), h("div", { key: 'f9d6c5d4e94f12a64c242026974d71b8b8b140c7', class: "sd-toggle__track" }, h("div", { key: '2798217a6e9766c0e6d3cc6ed333c54a0106d978', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/select-keyboard-navigation-xxEHPVkL.js

@@ -0,0 +1,37 @@
+/* @ts-self-types="./index.d.ts" */
+let urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+let nanoid = (size = 21) => {
+  let id = '';
+  let i = size | 0;
+  while (i--) {
+    id += urlAlphabet[(Math.random() * 64) | 0];
+  }
+  return id
+};
+
+class SelectKeyboardNavigation {
+    isSearchable;
+    filteredOptions;
+    constructor(isSearchable, filteredOptions) {
+        this.isSearchable = isSearchable;
+        this.filteredOptions = filteredOptions;
+    }
+    getNavigationBounds() {
+        return {
+            minIndex: this.isSearchable ? -1 : 0,
+            maxIndex: this.filteredOptions.length - 1,
+        };
+    }
+    getNextIndex(currentIndex, direction) {
+        const { minIndex, maxIndex } = this.getNavigationBounds();
+        if (direction === 'ArrowUp') {
+            return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
+        }
+        else {
+            return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
+        }
+    }
+}
+
+export { SelectKeyboardNavigation as S, nanoid as n };