@sellmate/design-system 1.0.48 → 1.0.50

package/dist/cjs/sd-confirm-modal.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var component_modal = require('./component.modal-CtW5Gmy5.js');
+var component_modal = require('./component.modal-DmQUWbve.js');
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
     positive: 'primary_md',
@@ -19,11 +19,9 @@ const CONFIRM_MODAL_ICON_COLOR = {
     default: '',
 };
 const TITLE_ICON_SIZE = Number(component_modal.modalTokens.modal.confirm.title.icon);
-const CLOSE_ICON_SIZE = Number(component_modal.modalTokens.modal.close.size);
-const CLOSE_ICON_COLOR = component_modal.modalTokens.modal.close.color;
 const SUB_BUTTON_PRESET = 'neutral_outline_md';
 
-const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:32px}`;
+const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:32px}`;
 
 const SdConfirmModal = class {
     constructor(hostRef) {
@@ -98,9 +96,9 @@ const SdConfirmModal = class {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (index.h("div", { key: '7f4965b642b3963fd3d0614b3e8b3fae8e8ae179', class: "sd-confirm-modal" }, index.h("sd-icon", { key: '4c2479d3afbc4c900dc4d329a8aaa04b6f520bb3', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: 'ec3f165135429b8a409e304bedff32897bd6566a', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'd2aae4878396d9bd714db26847ecad677e7a4cfb', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: '76b9c1fcfaae36edbd56c4d494013829456def98', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '636b0c6ce6bcba2722fae64ed582d90ce4f25367', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '1000f4f7e2674025ce3d220461828ab95e28eea8', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (index.h("div", { key: '8c4e6a948ffb27ea597dfc9d200b689c2667404a', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '4acc52151149bdaf882e097fc12cae7ea10303c4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '95ba699cf46bb6eaefdca98f37b45eef38e3e8b2', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'bb58b92c976751935ba4984f46a41edf0ee7ecb9', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'eccfb9b1f1c87e75a4a768802720b5f3468f167a', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '4c318650406ed9e75cc584ad3262d3782425fe31', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: 'f19744c657f73883ecafcbddc6b69e055e4694ec', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '3c6c0141dc0807725b92e824ccdedf3609d46484', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: 'fc73a08c85231570f72a9899ffee5cbd0c8882ba', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'dcbf92525246d05e57896340c3ef5761a574a08f', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: '146c0b3c0183773ba03c2bde150add46618f181b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '32cdf1a8ad4289cde89c13d1d250bc93f9392c73', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '1ced06b3bbc49593b9709fad227adcc3119e895b', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'cc7f45c6e6d3e0f925f581eff030e20dc0c40163', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: '78d55d4d0f2e2aae9d2692bbc142cf74d8d1795b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();

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

@@ -2,9 +2,20 @@
 
 var index = require('./index-Qvv0fGgj.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
-var sdButtonV2_config = require('./sd-button-v2.config-CQoTThio.js');
-var component_button = require('./component.button-BKa5OPya.js');
-var system = require('./system-lN7yOMPF.js');
+var sdButtonV2_config = require('./sd-button-v2.config-B4___nhv.js');
+var component_button = require('./component.button-DUsddONR.js');
+
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	content: {
+		secondary: "#555555",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	color: color
+};
 
 const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, sdButtonV2_config.BUTTON_CONFIG[name]]));
@@ -24,9 +35,9 @@ const PRESET_DIVIDER_COLORS = {
     danger: component_button.buttonTokens.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
-const MENU_ITEM_COLOR = system.systemTokens.color.content.secondary;
-const MENU_ITEM_ACTIVE_BACKGROUND = system.systemTokens.color.bg.accent.default;
-const MENU_ITEM_ACTIVE_COLOR = system.systemTokens.color.content.inverse;
+const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.content.inverse;
 const PRESET_MENU_ITEM_COLORS = {
     primary: MENU_ITEM_COLOR,
     secondary: MENU_ITEM_COLOR,

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

@@ -48,6 +48,8 @@ const SdFilePicker = class {
         this.update?.emit(this.value);
     };
     handleClear = (event) => {
+        if (this.disabled)
+            return;
         event.stopPropagation();
         const clearedValue = this.multiple ? [] : null;
         this.value = clearedValue;
@@ -100,15 +102,15 @@ const SdFilePicker = class {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (index.h("div", { key: '70152265f5fc43ddcda4318545698a58ee116b67', class: {
+        return (index.h("div", { key: 'b30f68abd7b5954ed60843fb436963306b3c9d58', 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) }, index.h("input", { key: '138e570a3660e8e79790da78a1527ff6eed8d313', 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 }), index.h("sd-icon", { key: '1d81730bd5fd82dda6e73ae86a62e9c4c0e0470a', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '4a433e8403beb6e953cd64726306df16e7560daa', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("input", { key: '6b0432850bc995ced5a87d2db33d5c669bb9f53d', 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 }), index.h("sd-icon", { key: 'bf0efeaf7aac37cc8fed9a1f6dca8179be053506', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), index.h("div", { key: '7b8cdf49421b152f1cc14360a93b0b8a088e6125', 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 && (index.h("sd-icon", { key: 'be2c64f7d28d6fe5c4146508f1544a3bb9fa6c8f', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '42659b157f11b26d7abd740b4a3761ad3dbf0b0a', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (index.h("sd-ghost-button", { key: '73386aa53e838065297d444310a33e32e0cb7c8a', icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { key: '54b4337797351ba86b391a020fa5260e807ff27e', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -0,0 +1,148 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+
+const ghostButton = {
+	xxs: {
+		size: "16",
+		icon: "12"
+	},
+	xs: {
+		size: "24",
+		icon: "16"
+	},
+	sm: {
+		size: "28",
+		icon: "20"
+	},
+	md: {
+		size: "36",
+		icon: "24"
+	},
+	lg: {
+		size: "62",
+		icon: "36"
+	},
+	radius: "4",
+	hover: {
+		opacity: "5%"
+	},
+	icon: {
+		disabled: "#BBBBBB"
+	},
+	"default": {
+		content: "#888888",
+		hover: {
+			bg: "#222222"
+		}
+	},
+	danger: {
+		content: "#E30000",
+		hover: {
+			bg: "#E30000"
+		}
+	},
+	action: {
+		content: "#025497",
+		hover: {
+			bg: "#0075FF"
+		}
+	}
+};
+var ghostButtonTokens = {
+	ghostButton: ghostButton
+};
+
+const GHOST_BUTTON_FOCUS_RING_COLOR = '#0075FF';
+const GHOST_BUTTON_SIZES = {
+    xxs: {
+        size: Number(ghostButtonTokens.ghostButton.xxs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xxs.icon),
+    },
+    xs: {
+        size: Number(ghostButtonTokens.ghostButton.xs.size),
+        icon: Number(ghostButtonTokens.ghostButton.xs.icon),
+    },
+    sm: {
+        size: Number(ghostButtonTokens.ghostButton.sm.size),
+        icon: Number(ghostButtonTokens.ghostButton.sm.icon),
+    },
+    md: {
+        size: Number(ghostButtonTokens.ghostButton.md.size),
+        icon: Number(ghostButtonTokens.ghostButton.md.icon),
+    },
+    lg: {
+        size: Number(ghostButtonTokens.ghostButton.lg.size),
+        icon: Number(ghostButtonTokens.ghostButton.lg.icon),
+    },
+};
+const GHOST_BUTTON_RADIUS = Number(ghostButtonTokens.ghostButton.radius);
+const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
+const GHOST_BUTTON_CONTENT_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.content,
+    danger: ghostButtonTokens.ghostButton.danger.content,
+    action: ghostButtonTokens.ghostButton.action.content,
+};
+const GHOST_BUTTON_HOVER_BG_COLORS = {
+    default: ghostButtonTokens.ghostButton.default.hover.bg,
+    danger: ghostButtonTokens.ghostButton.danger.hover.bg,
+    action: ghostButtonTokens.ghostButton.action.hover.bg,
+};
+const GHOST_BUTTON_DISABLED_ICON = ghostButtonTokens.ghostButton.icon.disabled;
+
+const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}`;
+
+const SdGhostButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.click = index.createEvent(this, "sdClick");
+    }
+    icon;
+    size = 'sm';
+    intent = 'default';
+    ariaLabel = '';
+    disabled = false;
+    click;
+    hasWarnedMissingAriaLabel = false;
+    handleClick = (event) => {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.click.emit(event);
+    };
+    componentWillRender() {
+        this.warnIfMissingAriaLabel();
+    }
+    warnIfMissingAriaLabel() {
+        const missing = !this.ariaLabel.trim();
+        if (!missing) {
+            this.hasWarnedMissingAriaLabel = false;
+            return;
+        }
+        if (this.hasWarnedMissingAriaLabel)
+            return;
+        console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`);
+        this.hasWarnedMissingAriaLabel = true;
+    }
+    render() {
+        const sizeConfig = GHOST_BUTTON_SIZES[this.size];
+        const contentColor = this.disabled
+            ? GHOST_BUTTON_DISABLED_ICON
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
+        const accessibleName = this.ariaLabel.trim() || undefined;
+        return (index.h("button", { key: '616698f4a8efbae1013d1f962cadedf72575789a', class: {
+                'sd-ghost-button': true,
+                'sd-ghost-button--disabled': this.disabled,
+            }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
+                '--sd-ghost-button-size': `${sizeConfig.size}px`,
+                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS}px`,
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
+                '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
+            }, onClick: this.handleClick }, index.h("sd-icon", { key: 'b8203a9ba9a6f385503289f299225e5df468ae8f', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+    }
+};
+SdGhostButton.style = sdGhostButtonCss();
+
+exports.sd_ghost_button = SdGhostButton;

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

@@ -55,9 +55,9 @@ const SdGuide = class {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (index.h("div", { key: '89499e72eef00e3ec8a18f3cdafa4a204653c22f', class: "sd-guide", style: {
+        return (index.h("div", { key: '1105258bc9d9d4d8d0c209ad735bb445e29ec0a0', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, index.h("sd-button", { key: '20b7c0b5ec7ac13075db533c63c99ff8140a8a80', 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 && (index.h("sd-portal", { key: 'db9fcfe211fc1b35f1111d09fa3c6d105b08bb62', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '8bd28388e0492bd909e440c0ddf8850aeb2abc92', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '3ac75e22a37abaf94422acb66be7056a4ecad289', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '2bef90a771e50f1f31823b6eca7f890645b329a8', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: '603e334f19b7ce0afaddfdbe9890f58071bd6638', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '219dd58caf462d77b814828e1ba61a6f958acba3', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: 'f225bdf560d43079c87c9345e09f134ef27cf1d4', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '2fb791f2392f0d38554f5a688660eae90ff34f9f', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, index.h("sd-button", { key: '68b032fc6c5cb145002f7c982939a9f8f98b0039', 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 && (index.h("sd-portal", { key: 'd5a4cf958f0428606d21d7b0f1e2fc9a9820e374', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: 'be20ea71204a52c31d8cfc16a6dcb973542dd2d6', style: { position: 'absolute', width: '0px', height: '0px' } }, index.h("div", { key: '344111896761d721cc35e453cc3cf13cb4d6547b', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, index.h("sd-button", { key: '984f743925fa2cae64b93103da38d6cbba0109fc', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), index.h("div", { key: 'ae8d5c7e00035e81ebe39359ca0809c78688dd7d', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '7527b4a66b314279d3cdddfc448a2d7e00f25ac4', name: "helpOutline", size: 24, color: "green_65" }), index.h("h3", { key: 'fe99c45c4a4b9fa970adbbb4d6f7902ce863b318', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), index.h("ul", { key: '00ad86270d3639796fa3d6df3c763be899082d0b', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -2,8 +2,7 @@
 
 var index = require('./index-Qvv0fGgj.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var component_textinput = require('./component.textinput-43trvZ5m.js');
-var system = require('./system-lN7yOMPF.js');
+var component_textinput = require('./component.textinput-DIDZPtYE.js');
 
 const sm = component_textinput.inputTokens.input.sm;
 const md = component_textinput.inputTokens.input.md;
@@ -31,12 +30,8 @@ const INPUT_COLORS = {
     text: component_textinput.inputTokens.input.text,
     icon: component_textinput.inputTokens.input.icon,
 };
-const INPUT_ICON = {
-    frameSize: Number(component_textinput.inputTokens.input.size.icon),
-    iconSize: Number(system.systemTokens.size.field.icon),
-};
 
-const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#D8D8D8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0;cursor:pointer}`;
+const sdInputCss = () => `sd-icon{display:inline-block;line-height:0}sd-icon .sd-icon--rotate-90{transform:rotate(90deg)}sd-icon .sd-icon--rotate-180{transform:rotate(180deg)}sd-icon .sd-icon--rotate-270{transform:rotate(270deg)}.sd-date-picker{width:100%;display:inline-block}.sd-date-picker .sd-date-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}.sd-date-picker .sd-date-picker__input{text-align:center !important}.sd-date-picker__menu{border-radius:8px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2)}sd-date-range-picker{width:fit-content;display:inline-flex}sd-date-range-picker .sd-date-range-picker--disabled .date-icon{cursor:not-allowed !important;color:#888888 !important}sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native{color:#888888 !important}sd-date-range-picker .sd-field .sd-field__control{min-width:210px}sd-date-range-picker .sd-field .sd-input__native{margin-left:17px !important}.sd-date-range-picker__menu{width:609px;box-sizing:border-box;border-radius:8px;padding:24px 19px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);background:white}.sd-date-range-picker__menu .sd-date-range-picker__header{margin-bottom:16px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.sd-date-range-picker__menu .sd-date-range-picker__header .header-label{margin:0 12px;width:40px;text-align:center;font-size:14px;line-height:24px}.sd-date-range-picker__menu .sd-date-range-picker__body{display:flex;flex-flow:row nowrap;align-items:stretch;gap:19px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container{width:266px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header{width:100%;height:24px;line-height:24px;font-size:14px;text-align:center;position:relative;padding:0 5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button{position:absolute;top:50%;transform:translateY(-50%)}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev{left:5px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next{right:5px;left:auto}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days{padding:0 5px;margin-top:8px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));column-gap:10px}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day{width:28px;height:20px;font-size:12px;line-height:20px;text-align:center;color:#888888}.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body{margin-top:12px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))}.sd-date-range-picker__menu .sd-date-range-picker__body .separator{width:1px;background-color:#D8D8D8}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active{-webkit-text-fill-color:#000;-webkit-box-shadow:0 0 0px 1000px #fff inset;box-shadow:0 0 0px 1000px #fff inset;transition:background-color 5000s ease-in-out 0s}sd-input{display:inline-flex}sd-input .sd-input__content{width:100%;height:100%;display:flex;flex-flow:row nowrap;align-items:center;color:var(--sd-input-text-color);font-size:var(--sd-input-font-size);line-height:var(--sd-input-line-height);font-weight:var(--sd-input-font-weight);padding:0 var(--sd-input-padding-x);gap:var(--sd-input-gap)}sd-input .sd-input__content .sd-input__native{width:100%;height:100%;border:none;outline:none;background:transparent;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit}sd-input .sd-input__content .sd-input__native[disabled]{cursor:not-allowed;color:var(--sd-input-disabled-color)}sd-input .sd-input__content .sd-input__native::placeholder{color:var(--sd-input-placeholder-color)}sd-input .sd-input__content .sd-input__clear-icon,sd-input .sd-input__content .sd-input__password-icon{flex-shrink:0}sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__clear-icon,sd-input .sd-input__content .sd-input__native[disabled]~.sd-input__password-icon{cursor:not-allowed;pointer-events:none}`;
 
 const SdInput = class {
     constructor(hostRef) {
@@ -147,10 +142,16 @@ const SdInput = class {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (index.h("sd-field", { key: '421eeff951b21ce57727ab023c026c7b00d97a36', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: '90e8182f3c2ea87696311eabc6bb33c8def7bc1d', class: "sd-input__content" }, index.h("slot", { key: '4a8f311ae31036ffc2bce4ca0b2fd42799287339', name: "prefix" }), index.h("input", { key: 'c3d69ca0146358eccf80565a557e5e94490953d2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : 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 }), index.h("slot", { key: 'd0d5aa897fee76985c87e72d7fa48541dfeead1e', name: "suffix" }), this.clearable && this.internalValue && (index.h("sd-icon", { key: 'c57f105b957d4fa70c9dd1eec0d359c599945038', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
+        return (index.h("sd-field", { key: '00cffcf0886042fbc10be8a3521fbe46f2a29911', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("label", { key: 'e4cf6f84306a8ddde595c317173c98c3ab00d51f', class: "sd-input__content" }, index.h("slot", { key: 'd59f97019d7830fe8a050ed0ddcb212e6f8ceead', name: "prefix" }), index.h("input", { key: 'e949741fe2e5f6919e1a0ee07d06c8adb3ff433f', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : 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 }), index.h("slot", { key: '3bc1dd7c7034556c7c5baa4ceb02240e0062e995', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (index.h("sd-ghost-button", { key: '0edf50176fe97d8a8cd0f0b92c0ebe538c85d740', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+                if (this.disabled)
+                    return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (index.h("sd-icon", { key: '75c80ff0143ae0351dafe5166855132af3516b00', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
+            } })), this.type === 'password' && (index.h("sd-ghost-button", { key: '0b58e8a381931f03f98917c368160538347336c5', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+                if (this.disabled)
+                    return;
+                this.passwordVisible = !this.passwordVisible;
+            } })))));
     }
     static get watchers() { return {
         "value": [{
@@ -187,17 +188,17 @@ const SdSelectSearchInput = class {
         input?.focus({ preventScroll: true });
     }
     render() {
-        return (index.h("div", { key: 'cfc997e9e3c418a2aa6eb33cb39a3928fba84f91', class: {
+        return (index.h("div", { key: 'a344e235d317bb36270da0442d574425282438ad', class: {
                 'sd-select-search-input': true,
                 'sd-select-search-input--scrolled': !!this.isScrolled,
-            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: '5d2528dfba7a392c31d47699f4afbcee41583754', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
+            }, onClick: event => event.stopPropagation() }, index.h("sd-input", { key: 'ae43752f3ab36cd25e0231db74120fa46eaecc31', ref: el => (this.searchRef = el), value: this.searchText, placeholder: "\uAC80\uC0C9", clearable: true, inputStyle: { 'padding-left': '8px' }, autofocus: true, onSdUpdate: event => {
                 this.searchInput.emit(String(event?.detail));
             }, onSdFocus: () => {
                 this.searchFocus.emit();
             }, onKeyDown: event => {
                 if (event.code === 'Enter')
                     event.stopPropagation();
-            } }, index.h("sd-icon", { key: 'a9161175dfd27e86fa5ac036ab592c33d5820040', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
+            } }, index.h("sd-icon", { key: '18f8c09f864c23a43c35533fa0dac8f40c27829c', name: "search", size: 16, color: "#737373", style: { marginRight: '4px' }, slot: "prefix" }))));
     }
 };
 SdSelectSearchInput.style = sdSelectSearchInputCss();

package/dist/cjs/sd-loading-spinner_3.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Qvv0fGgj.js');
-var resolveColor = require('./resolveColor-Di1RNekE.js');
+var resolveColor = require('./resolveColor-LhfOKtTZ.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var selectKeyboardNavigation = require('./select-keyboard-navigation-CErfIrGV.js');
 var index$1 = require('./index-BUvXpPc3.js');
@@ -17,7 +17,7 @@ const SdLoadingSpinner = class {
         return resolveColor.resolveColor(this.color);
     }
     render() {
-        return (index.h(index.Fragment, { key: '739d89956c75131c785c9037495509783fbcfe7a' }, index.h("svg", { key: '3938cc3d2f2abbb51477f900222b4ba434411e6a', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: '4a21337e193f56c62da1268d3bf6d56651263771', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (index.h(index.Fragment, { key: '0cfc7069d024e08cfad7b4f6479b8ba2835428c2' }, index.h("svg", { key: 'fe4c1e68baa60142eaceaaef6e4df88c79b626b2', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, index.h("circle", { key: '3e923b3a138d7aafc9b8cabcd884610addd916c1', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
 };
 SdLoadingSpinner.style = sdLoadingSpinnerCss();
@@ -97,12 +97,12 @@ const SdPagination = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'c689cc21909b50a709487a409ecbd2ba48d3db3a', class: this.paginationClasses }, index.h("div", { key: 'a38cee49c5d225beea8acd35cb7b370319886bee', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (index.h("div", { key: '9b8ab3ae0c63267ab7933087cd85b2fd2f6f5697', class: this.paginationClasses }, index.h("div", { key: '963f072a708ad1800492ce5467e17af8648f6171', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (index.h("div", { class: "pagination-info" }, index.h("span", { class: "current-page" }, this.currentPage), index.h("span", null, "/"), index.h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (index.h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '40dcb43cd251c5cbdf18e502acd67962e87d4496', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), index.h("div", { key: '5a0f5b9d866e873420ef6e29e0650e5884c2ab7c', class: "append-btns" }, this.renderNextButtons())));
     }
 };
 SdPagination.style = sdPaginationCss();

package/dist/cjs/sd-number-input.cjs.entry.js

@@ -388,12 +388,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: '3c0c340cb1078a7f3763ee9f7339ef0cec63b020', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'd2be35e6a7e1201436ad625f4d9678b023187666', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'd048a5c576601ff6ac61eda9613d5981b415cd53', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'e618f41dda4f8afcb52ec4dc20828adf0ddc77c3', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (index.h("sd-field", { key: '20d010b26dc955dcbf30e908a3ebab33644f1e3c', name: this.name, label: this.label, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '35ad9cb4ff6db3354b87aedd503a0ddd4c7493b2', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'f18fc88a39608857ddf6028b6fb12a500c0c4cab', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'd55e76ddf3bc3e07102307c392f6ba3037335246', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: 'd293f7530b94c340af5495feaa3323f5f6d7e6bc', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '21d97799b6222f8c5f2145660d4cf25bf5fdeabe', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '328f58b6b34b9dff32d722ac55f88e76bfa24b31', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '1b63561986e1433b8c111487de607d74462881c2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (index.h("span", { key: '2008a9aa47389bcac4df03de3e357df6f684f379', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '5841af412ad228796debe31f7578fd332bf8883a', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'ebc2f66dbb12664a976b36eb5b333ff7597d6d52', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (index.h("span", { key: 'cbe0be362ae8e5d5db11f32ae689964e3a1fc57f', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '4bcdfafd3ca67a5ddcbcaa8ad63c80ba75104811', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '2df5dac96b6e60d108e1769a1e3d7c2045c15886', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -4,10 +4,6 @@ var index = require('./index-Qvv0fGgj.js');
 var tooltipArrow = require('./tooltipArrow-Mb2Dhc7T.js');
 
 const popover = {
-	close: {
-		icon: "12",
-		color: "#888888"
-	},
 	bg: "#07284A"};
 var popoverTokens = {
 	popover: popover
@@ -46,24 +42,28 @@ const SdPopover = class {
     buttonEl;
     get popoverOffset() {
         switch (this.placement) {
-            case 'top': return [0, -4];
-            case 'bottom': return [0, 4];
-            case 'left': return [4, 0];
-            case 'right': return [4, 0];
+            case 'top':
+                return [0, -4];
+            case 'bottom':
+                return [0, 4];
+            case 'left':
+                return [4, 0];
+            case 'right':
+                return [4, 0];
         }
     }
     handleClose = () => {
         this.showPopover = false;
     };
     render() {
-        return (index.h(index.Fragment, { key: '32543028f51799b838817a81d82c8fc4e16d34d9' }, this.label ? (index.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) })) : (index.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 && (index.h("sd-floating-portal", { key: '146f7b10c48d0e43d9daad84f2b0d73a53c1f083', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.h("div", { key: '020b1bc52cb001ef761aac5e88fdfe4a3cc1dbfc', class: {
+        return (index.h(index.Fragment, { key: 'ab94ec74dc1c6d4982e6420c20c72d045cb91e10' }, this.label ? (index.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) })) : (index.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 && (index.h("sd-floating-portal", { key: '7cacc11be5463e66f0642ed080b8e27534724aad', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, index.h("div", { key: '192366a56cbbbd4ddf60378cb948afd742e738f9', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, index.h("i", { key: '819af7776ce65a25c996262105b05e37d4d04652', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '053b299c5a41acb16042adfa2aba7c35eedb0602' })), index.h("div", { key: '109f2b1044827112922e40b04671785209b9d816', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: '99f49b0165ce502ba30ecac3369ba6086cbabb6f', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '5ecd1eea5a83c3fcf71719b308b75734ba42f96d', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '9a3a3a38dd3fac46e370f45e65dd22dbcf49bce7', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("button", { key: '6f231ddb997a45f23c258a092b45f3d6a5e49e60', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, index.h("sd-icon", { key: '738c152ec2435992ae21394bf2c164515cef7ed9', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, index.h("i", { key: '5a29695140891de8987d0c61c67b38b11cc84f8d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '98a9c7333df57d4655c87d3a0949a0f445e96d47' })), index.h("div", { key: '6c822d0c1f441f31f58724c13b2fe2cd5f5346f3', class: "sd-floating-menu__content" }, this.menuTitle && index.h("div", { key: 'effca66c7bfe59a3a25375d622b8f9bef124c01c', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (index.h("div", { key: '66b655bb2d0520f2f390e5ef8ffee7d4b8aa5e4e', class: "sd-floating-menu__messages" }, this.messages.map(message => (index.h("div", null, message))))), this.buttons.length > 0 && (index.h("div", { key: '354a08c2c58eeb2347ef6c8e6acbd13639eb827d', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (index.h("sd-button", { ...button })))))), this.useClose && (index.h("sd-ghost-button", { key: '3ee62dc5c099d94ff998c91125f54e72bdd2dc18', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
     }
     static get watchers() { return {
         "show": [{

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

@@ -41,10 +41,10 @@ const SdProgress = class {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (index.h("div", { key: '483f8f0ec69bc7f4bd608332eb2f87b722bc947f', style: {
+        return (index.h("div", { key: 'ded78b5df0eb9233f7a920d20a2b3d270f2259eb', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: 'b4d3f1f425cd4ae96ef02a6c56671a182ab7ca09', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && index.h("div", { key: '6249a64c5d0d3c2462fc3e6222698d9088a9fbfb', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (index.h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, index.h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), index.h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/cjs/sd-select-dropdown_2.cjs.entry.js

@@ -155,10 +155,10 @@ const SdSelectDropdown = class {
         this.isScrolled = scrollTop > 0;
     };
     render() {
-        return (index.h("div", { key: '0e45aa22a4566ec4a1a4f8dbecd2f60a024b0a34', class: {
+        return (index.h("div", { key: '7aae611f7e409ae7e1285922d0cf921a740df0c0', class: {
                 'sd-select-dropdown': true,
                 'sd-select-dropdown--ready': this.isDropdownReady,
-            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: 'c8f63d17ec76fff2bbb36773baa2dc015396956a', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
+            }, style: this.dropdownSize, onScroll: this.handleDropdownScroll, ref: el => (this.dropdownRef = el) }, this.searchable && (index.h("sd-select-search-input", { key: '25def5c05698732910a5c411a7f5d5165d421453', ref: el => (this.searchRef = el), isScrolled: this.isScrolled, searchText: this.searchText, onSdSearchInput: (event) => (this.searchText = event.detail || ''), onSdSearchFocus: () => (this.itemIndex = -1) })), this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index$1) => (index.h("slot", { name: `option-${option.value}` }, index.h("sd-select-option", { option: option, index: index$1, isSelected: this.isOptionSelected(option.value), isFocused: index$1 === this.itemIndex, onOptionClick: ({ detail }) => this.optionClick.emit(detail), useCheckbox: this.useCheckbox }))))) : (index.h("slot", { name: "option-placeholder" }, index.h("div", { class: 'sd-select-option-placeholder' }, this.optionPlaceholder)))));
     }
     static get watchers() { return {
         "filteredOptions": [{
@@ -205,7 +205,7 @@ const SdSelectOption = class {
         }
     };
     render() {
-        return (index.h("div", { key: '1312407dd54318273dd5be025d20c992a5e8bd97', class: {
+        return (index.h("div", { key: '7341b944b2ca7246e04a279ee9a0e6a823f43091', class: {
                 'sd-select__option': true,
                 'sd-select__option--selected': this.isSelected,
                 'sd-select__option--disabled': !!this.option.disabled,

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

@@ -275,7 +275,7 @@ const SdSelectGroup = class extends baseDropdownEvent.BaseDropdownEvent {
         });
     }
     render() {
-        return (index.h("sd-field", { key: '7dc16e6167d57ea23971ddc60f6414c1894f4163', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: '470501b3bd905154bb090c11237feea3c3566fd5', class: {
+        return (index.h("sd-field", { key: '43023a143ed08a3f06bc1abd55d64302947f17f9', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, addonLabel: this.addonLabel, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), style: { '--field-width': this.width || '200px' } }, index.h("div", { key: 'bf9e7710b06dbca0d260df64f696559640d6cfcb', class: {
                 'sd-select-group': true,
                 'sd-select-group--open': this.isOpen,
                 'sd-select-group--disabled': this.disabled,

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

@@ -155,7 +155,7 @@ const SdSelectMultiple = class extends baseDropdownEvent.BaseDropdownEvent {
         this.handleOptionSelection(option);
     };
     render() {
-        return (index.h("sd-field", { key: '526a52f1fb3a8bd80a55d7094857901d7c933ca5', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '1084a5740aca5ea9d27485807e7edfc276d78ba3', class: {
+        return (index.h("sd-field", { key: '52a829d1c59c4083a809e028687c1f9693f6dcf5', label: this.label, name: this.name, rules: this.rules, error: this.error, disabled: this.disabled, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el) }, index.h("div", { key: '80c36ebc81388a0ffa1c2593386123335715c8a9', class: {
                 'sd-select-multiple': true,
                 'sd-select-multiple--open': this.isOpen,
                 'sd-select-multiple--disabled': this.disabled,

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

@@ -48,7 +48,7 @@ const SdSelectOptionGroup = class {
         }
     };
     render() {
-        return (index.h("div", { key: 'a26c5527bd3ffcf56d9811f5bca91fd859a232ea', class: {
+        return (index.h("div", { key: '25fd7924d08648733a4986534a60fe0383e1511b', 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: '30ac15175f13b9cffe740052dbf18ca14753ab6d', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '04a8a8a8bdc847c6c7cb757961f69e1e40161775', 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: '2e530e5e1a3f13ca50a86bcfa684fd3b90daf397', class: "sd-select__option-group__label-wrapper" }, this.useCheckbox && (index.h("sd-checkbox", { key: '9046261abe407a94dc7863ccdac28c776e04effd', value: this.isSelected, disabled: this.option.disabled, onClick: e => {
                 e.preventDefault();
                 this.handleClick(this.option, this.isSelected, e);
-            } })), index.h("span", { key: 'eca4b0955a7988a1a293b709bf29dc23f9443def', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: '39e0a7a5444b9096da0d759cdb4cd0ee04bf2250', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
+            } })), index.h("span", { key: '6bb7fba5a8fd4ba22f52d040b836b7796b641ce5', class: "sd-select__option-group-label" }, this.option.label), this.useIndicator && this.option.type !== 'item' && (index.h("span", { key: 'd44db76484c2e596eb9ee9378a7b238a042a8b6b', class: "sd-select__option-group__count-indicator" }, `(${this.countInfo?.selectedCount}/${this.countInfo?.totalCount})`)))));
     }
 };
 SdSelectOptionGroup.style = sdSelectOptionGroupCss();