@sellmate/design-system 1.0.66 → 1.0.68

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 var component_button = require('./component.button-cqV-iCG5.js');
 var resolveColor = require('./resolveColor-LhfOKtTZ.js');
-var tooltipArrow = require('./tooltipArrow-DhevfDPX.js');
+var tooltipArrow = require('./tooltipArrow-Xkv-p1bY.js');
 
 const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-button-radius-sm, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);color:var(--sd-button-button-text-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}`;
 
@@ -84,8 +84,9 @@ const field = {
 			icon: "16",
 			typography: {
 				fontWeight: "700",
-				fontSize: "16",
-				lineHeight: "26"}
+				fontSize: "14",
+				lineHeight: "24"
+			}
 		}
 	},
 	addonLabel: {
@@ -296,20 +297,20 @@ const SdField = class {
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
             }
             : {};
-        return (index.h("div", { key: 'f12b2e13ac8152d1e688f903a60a8fa670e99065', class: {
+        return (index.h("div", { key: 'af5531a8bad5b8685f56748ce55044927f061903', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, index.h("div", { key: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', class: "sd-field__main", style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, index.h("div", { key: '82f2472c0ccc778a982bbf6164edfdc1629a9eb1', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '42dd86d80718b245402b42376d28810745cf2154', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, index.h("div", { key: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
+                : {} }, index.h("div", { key: '0c80a69019f7b14c5f19eeb21f751c885df4c82b', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            } }, addon && index.h("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), index.h("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), this.errorMsg || this.errorMessage ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && index.h("div", { class: "sd-field__hint" }, this.hint))))));
+            } }, addon && index.h("div", { key: 'c3b9fac0b4586ba5697af8a7cfe7a6aec01b0e52', class: "sd-field__addon" }, addon), index.h("slot", { key: 'f7e087e3b3927708fd28919dba9e6edf4e1d317b' })), this.errorMsg || this.errorMessage ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && index.h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)
@@ -330,7 +331,7 @@ const SdFloatingPopover = class {
     to = 'body';
     parentRef = null;
     offset = [0, 0];
-    zIndex = 10000;
+    zIndex = 998;
     placement = 'bottom';
     open = false;
     close;
@@ -388,7 +389,7 @@ const SdFloatingPopover = class {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'absolute',
-            zIndex: (this.zIndex ?? 10000).toString(),
+            zIndex: (this.zIndex ?? 998).toString(),
             transition: 'opacity 0.4s',
             top: '-9999px',
             left: '-9999px',
@@ -418,18 +419,22 @@ const SdFloatingPopover = class {
             switch (this.placement) {
                 case 'top':
                     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    left =
+                        rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
                     break;
                 case 'bottom':
                     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    left =
+                        rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
                     break;
                 case 'left':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    top =
+                        rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
                     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
                     break;
                 case 'right':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    top =
+                        rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
                     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
                     break;
             }
@@ -470,7 +475,7 @@ const SdFloatingPopover = class {
         this.close.emit();
     }
     render() {
-        return index.h("slot", { key: '4dafb853b2a82e541f59056d2fedf08a6fa040ba' });
+        return index.h("slot", { key: 'f463fadca5060ebc995d8115575404611b94fb11' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -585,14 +590,14 @@ const SdTooltip = class {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (index.h(index.Fragment, { key: '097722e57d6a808193e8fc0d48cebc80ee13848a' }, index.h("div", { key: '92c6fd83098faec1cfa405ace12530d0cb408395', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: 'd05d011181a8c183690607c974208e708ccba184', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '281c3994d52fcd1d6194edd12bd64ac9a42f5e71', ref: el => (this.menuEl = el), class: {
+        return (index.h(index.Fragment, { key: 'aade7a4be8e9955ca4dc437845ee8de9d212fd61' }, index.h("div", { key: '332c4872541bea334c1f0b6f06de8a1789dc10b8', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: '96f19d91f765020ae5663f216011e2000617c9d1', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '12c2f1fbf59dc1a790016da071805164b0426419', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, index.h("i", { key: '87374c0a423bc037decdc820e118c65ea7b3f75f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '9cdd8215849973011a2339ed80bfb2863b1e374e' })), index.h("div", { key: '4f764958e07a8b2ed0ea093609f5a42d86fa3f3c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, index.h("i", { key: 'f69c0cb66d5be975f60bfa7cdbd46e0283d4af2b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '3fbc2c3baa903e80d525225ab1f1aa4b3ec6ad4b' })), index.h("div", { key: 'a2286ef4e9f5d6c1b1a26ea044ddf1051900c5a2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 var resolveColor = require('./resolveColor-LhfOKtTZ.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 
@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (index.h(index.Fragment, { key: 'dd37653555ffeab3b249575c8a1cbe9aa70498b1' }, index.h("div", { key: 'eb0cea509b62fe1942d8ddfb955fee920b5c51a5', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'a792a49e58b1b1756f11d0bb6e7441674c63455e' }))));
+        return (index.h(index.Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, index.h("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
     }
 };
 SdCard.style = sdCardCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 
 const checkbox = {
 	size: "16",

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

@@ -0,0 +1,312 @@
+'use strict';
+
+var index = require('./index-B2QvhbC3.js');
+
+const chip = {
+	height: "24",
+	paddingX: "8",
+	gap: "4",
+	radius: "9999",
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"
+		},
+		focus: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "400",
+			lineHeight: "20"
+		}
+	},
+	bg: {
+		"default": "#F6F6F6",
+		error: "#FCEFEF",
+		focus: "#FFFFFF"
+	},
+	content: {
+		"default": "#888888",
+		error: "#E30000",
+		focus: "#555555"
+	},
+	border: {
+		focus: "#E1E1E1",
+		width: "1"
+	}
+};
+var chipTokens = {
+	chip: chip
+};
+
+const CHIP_LAYOUT = {
+    height: `${chipTokens.chip.height}px`,
+    paddingX: `${chipTokens.chip.paddingX}px`,
+    gap: `${chipTokens.chip.gap}px`,
+    radius: `${chipTokens.chip.radius}px`,
+    borderWidth: `${chipTokens.chip.border.width}px`,
+};
+const CHIP_COLORS = {
+    bg: {
+        default: chipTokens.chip.bg.default,
+        error: chipTokens.chip.bg.error,
+        focus: chipTokens.chip.bg.focus,
+    },
+    content: {
+        default: chipTokens.chip.content.default,
+        error: chipTokens.chip.content.error,
+        focus: chipTokens.chip.content.focus,
+    },
+    border: {
+        focus: chipTokens.chip.border.focus,
+    },
+};
+const CHIP_TYPOGRAPHY = {
+    default: {
+        fontFamily: chipTokens.chip.typography.default.fontFamily,
+        fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.default.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
+    },
+    focus: {
+        fontFamily: chipTokens.chip.typography.focus.fontFamily,
+        fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.focus.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
+    },
+};
+
+const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
+
+const SdChip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.remove = index.createEvent(this, "sdRemove", 7);
+        this.focus = index.createEvent(this, "sdFocus", 7);
+        this.blur = index.createEvent(this, "sdBlur", 7);
+    }
+    get el() { return index.getElement(this); }
+    name = '';
+    value = '';
+    error = false;
+    disabled = false;
+    placeholder = '';
+    rules = [];
+    internalValue = '';
+    isEditing = false;
+    update;
+    remove;
+    focus;
+    blur;
+    inputEl;
+    draftValue = '';
+    shouldInitInput = false;
+    valueChanged(newValue) {
+        const nextValue = newValue ?? '';
+        const wasEditing = this.isEditing;
+        this.internalValue = nextValue;
+        this.draftValue = nextValue;
+        if (wasEditing) {
+            this.isEditing = false;
+            this.shouldInitInput = false;
+            this.inputEl?.blur();
+            this.blur.emit();
+        }
+    }
+    componentWillLoad() {
+        this.internalValue = this.value ?? '';
+    }
+    componentDidLoad() {
+        this.registerToForm();
+    }
+    disconnectedCallback() {
+        this.unregisterFromForm();
+    }
+    async sdValidate() {
+        if (!this.rules || this.rules.length === 0) {
+            this.error = false;
+            return true;
+        }
+        for (const rule of this.rules) {
+            const result = rule(this.internalValue ?? '');
+            if (result !== true) {
+                this.error = true;
+                return false;
+            }
+        }
+        this.error = false;
+        return true;
+    }
+    async sdReset() {
+        this.internalValue = '';
+        this.value = '';
+        this.error = false;
+        this.draftValue = '';
+        this.isEditing = false;
+        this.shouldInitInput = false;
+    }
+    async sdResetValidate() {
+        this.error = false;
+    }
+    async sdResetValidation() {
+        this.error = false;
+    }
+    async sdFocus() {
+        if (this.disabled)
+            return;
+        this.enterEditMode();
+    }
+    async sdGetNativeElement() {
+        return this.inputEl ?? null;
+    }
+    enterEditMode = () => {
+        if (this.disabled || this.isEditing)
+            return;
+        this.draftValue = this.internalValue;
+        this.shouldInitInput = true;
+        this.isEditing = true;
+        this.focus.emit();
+    };
+    commitEdit = async () => {
+        if (!this.isEditing)
+            return;
+        const next = (this.inputEl?.textContent ?? this.draftValue).trim();
+        const changed = next !== this.draftValue;
+        this.internalValue = next;
+        this.isEditing = false;
+        this.shouldInitInput = false;
+        this.value = next;
+        if (changed) {
+            this.update.emit(next);
+        }
+        await this.sdValidate();
+        this.blur.emit();
+    };
+    cancelEdit = () => {
+        if (!this.isEditing)
+            return;
+        this.internalValue = this.draftValue;
+        this.isEditing = false;
+        this.shouldInitInput = false;
+        this.blur.emit();
+    };
+    handleChipClick = () => {
+        if (this.disabled || this.isEditing)
+            return;
+        this.enterEditMode();
+    };
+    handleChipKeyDown = (event) => {
+        if (this.disabled || this.isEditing)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.enterEditMode();
+        }
+    };
+    handleInputChange = (event) => {
+        const target = event.target;
+        this.internalValue = target.textContent ?? '';
+    };
+    handleInputKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.commitEdit();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    };
+    handleInputBlur = () => {
+        this.commitEdit();
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        document.execCommand('insertText', false, text);
+    };
+    handleRemoveClick = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.remove.emit();
+    };
+    syncInputValue(value) {
+        if (!this.inputEl)
+            return;
+        this.inputEl.textContent = value;
+        const range = document.createRange();
+        range.selectNodeContents(this.inputEl);
+        range.collapse(false);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+    }
+    registerToForm() {
+        const formEl = this.el.closest('sd-form');
+        if (!formEl || typeof formEl.componentOnReady !== 'function')
+            return;
+        formEl.componentOnReady().then(form => {
+            form.sdRegisterField(this);
+        });
+    }
+    unregisterFromForm() {
+        if (!this.name)
+            return;
+        const formEl = this.el.closest('sd-form');
+        formEl?.componentOnReady().then(form => {
+            form.sdUnregisterField(this.name);
+        });
+    }
+    componentDidUpdate() {
+        if (this.isEditing && this.inputEl && this.shouldInitInput) {
+            this.inputEl.focus();
+            this.syncInputValue(this.internalValue);
+            this.shouldInitInput = false;
+        }
+    }
+    resolveState() {
+        if (this.isEditing)
+            return 'focus';
+        if (this.error)
+            return 'error';
+        return 'default';
+    }
+    render() {
+        const state = this.resolveState();
+        const typography = state === 'focus' ? CHIP_TYPOGRAPHY.focus : CHIP_TYPOGRAPHY.default;
+        const cssVars = {
+            '--sd-chip-height': CHIP_LAYOUT.height,
+            '--sd-chip-padding-x': CHIP_LAYOUT.paddingX,
+            '--sd-chip-gap': CHIP_LAYOUT.gap,
+            '--sd-chip-radius': CHIP_LAYOUT.radius,
+            '--sd-chip-border-width': CHIP_LAYOUT.borderWidth,
+            '--sd-chip-bg': CHIP_COLORS.bg[state],
+            '--sd-chip-content': CHIP_COLORS.content[state],
+            '--sd-chip-border-color': state === 'focus' ? CHIP_COLORS.border.focus : 'transparent',
+            '--sd-chip-font-family': typography.fontFamily,
+            '--sd-chip-font-size': typography.fontSize,
+            '--sd-chip-font-weight': typography.fontWeight,
+            '--sd-chip-line-height': typography.lineHeight,
+        };
+        return (index.h("span", { key: 'ec814d57fb4032de1370e56d61cd51b6e831312a', class: {
+                'sd-chip': true,
+                [`sd-chip--${state}`]: true,
+                'sd-chip--disabled': this.disabled,
+                'sd-chip--editable': !this.disabled,
+            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (index.h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
+            index.h("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
+            !this.disabled && (index.h("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
+        ])));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdChip.style = sdChipCss();
+
+exports.sd_chip = SdChip;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 
 const spinner = {
 	color: {
@@ -63,7 +63,7 @@ const SdCircleProgress = class {
             arcStyle.strokeDashoffset = '0';
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
-        return (index.h(index.Host, { key: 'fb876909febfc95bb69c58031ac37419baa07137', style: hostStyle }, index.h("svg", { key: '3bb8130bab317a74c1553dd2ceb52b8c0f65f69f', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '5904f93a6b1c333dbcbd805140d5e65b5af20080', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: '4d8a1d352e4003a75dd63f67a66a05f595ae5700', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
+        return (index.h(index.Host, { key: '50b598305810f4f91c5afb7ede87c60178e4e6df', style: hostStyle }, index.h("svg", { key: '7edcf8a57bf5589910d08a47b64179222ce9c03b', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '43810b096bdd644e4b09bfd770de6b0194afe3c8', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: '701cfdd0eadabea530d3a9deada993a568f3fb19', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 var component_modal = require('./component.modal-BFelrSMx.js');
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
@@ -96,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: 'c95e6e3992e9d63c19f27624e92c00b5046503e0', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: 'edab233c28ebcfc181062d78cb80ec27a3ace8b4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '4ea2ef8ac6027a6455367b39b6d3cc6cf073f0a8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '5a25a6f0812a6932949a2667db2af1b69d772293', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'b431572003c129a0d44095a317532b535753abd3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: 'cd425d24bde982323a0156ff18f4dcdc81660dd5', 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: '9486cf19dc6692228f615112b0777b6167c1a8de', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (index.h("div", { key: '0ec5edeaef4920bb9193c225e5b39465e138eb25', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '78db09f415f399302048280a2d3eb6eb737c1d47', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '30921f2c1fc59b7baa608c5b270f45cced3b4a69', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'fdb1fa855a980ccad41101de0b1b0fc87a8a503b', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'e3539c1d7e82c957ba65e3d63e18e74108ed4ccc', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '010bb3a2918672714a664cc9afa561d82ea2af30', 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: '6501c456b1cac2fc14e62e8094c5996472eb10cc', 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: '7218d8bf72e26f36f88db68f57818911bb09056d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: 'e16de1bb3c851988050b12ac07c7adcedab560da', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '8c14b099e6b8a93673ff3eb2f0931a45c98d620a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: 'fb9a3984f0476d2fceca98bac186d0a52a0ab206', 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: 'fb38b92bc7ee05ede36eab14d65062a0b6289762', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '7834c5baf84a1537e511f77f1d2bb2c018b2e5df', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'ca7a8fa074bde0339052adbacb52a60459e3da23', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: '5e3238161e753a8ea2a0266d099ff03a89b63871', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -139,6 +139,7 @@ const SdLoadingModal = class {
     }
     state = 'loading';
     message = '';
+    useButton = false;
     buttonLabel = '';
     width;
     height;
@@ -177,7 +178,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (index.h(index.Host, { key: 'dcc53b3421a88970ce4ad8258285a896da0e400c', style: hostStyle }, index.h("div", { key: 'bb2319b861392c8a88587b7654f2c6227b226cc7', class: "sd-loading-modal" }, index.h("div", { key: 'f3064846c06d2cd1e9d2474dc16fe80773c4a8f7', class: "sd-loading-modal__content" }, this.state === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("p", { key: '932c71930b4484d652266f85556e7eb2195a81c9', class: "sd-loading-modal__message" }, this.resolvedMessage), index.h("div", { key: 'e06cfa7729b72f881789d573f38116ac5086e062', class: "sd-loading-modal__button" }, index.h("sd-button-v2", { key: '63684aa367e552df0e020ce4766d6c34c1361427', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick })))));
+        return (index.h(index.Host, { key: '8ecd5db2ffde201dd0c7d3c58b1da6b85b5a4116', style: hostStyle }, index.h("div", { key: '61f79b16b22d5ab4bb4dca03f88568174cfcfb1f', class: "sd-loading-modal" }, index.h("div", { key: 'bc373cfebab5949bee9c024bd86ca92d8294ff7b', class: "sd-loading-modal__content" }, this.state === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("p", { key: 'e9015b9c9813b1968c8ca7991d654761eb3ee9b3', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (index.h("div", { key: '4ed941961611fe9533bd2b989c9b68ef6c7ca741', class: "sd-loading-modal__button" }, index.h("sd-button-v2", { key: '13f4c5ef5ad5285d846716e5dd72d9f2565c08f9', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

package/dist/cjs/sd-date-box.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

package/dist/cjs/sd-date-picker-calendar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
@@ -142,7 +142,7 @@ const SdDatePickerCalendar = class {
             '--calendar-day-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (index.h("div", { key: '9e47bf6790f947639b1868a653c9d451905d4a49', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '641a9726b22aff0e465347bf3363fdd6f3110919', class: "sd-date-picker-calendar__header" }, index.h("div", { key: '71e4838be05148f989af7ccb692482db425c38d7', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '060795c43807ee50b13448ac559fb7945a48d8be', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: '5cf2c070134aa04dc5f9d506b91bdff759d9453b', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'dd3c9d26bc4b79673e12b90d2a7d563e4adda707', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: '962ee5b8adbcbf988bc94b81b3dd0fe4e388a588', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '54d1fcfbcbe1e232cbea5cdd9a948045207771c7', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: 'ff8011dbf88a257ba4b47dbcd1a3b8c414b4e7b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '2594eed1efacc8b3bdf648ab7527a81608e2321d', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: 'a83692da9caeaef4c02c777d43f769026182d5a2', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: 'bc131a11ed98ac84dee775090ca24be794fece55', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: 'bc4deb734c9c01806ae7e75640f97d76c9e79f64', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (index.h("div", { key: 'd23c08b38605dad1e5b3266a7e1ad72e0aeb7eb9', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '1c25bd19272e1e7f4e81601a0ffa13d7b882e4e4', class: "sd-date-picker-calendar__header" }, index.h("div", { key: 'aed9a7ff3282d363c61b49dde6b6e9d6131a456c', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '68ae361b1cc4bfd9351b093aee6d4193f2ac5549', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: 'e17d9a962faf96e8b70b0890e59e4c2e5ca515b0', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'ab65ce4f9f64fcc9f4084c073a0a0625ceeb9f2d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: 'a01cb1691e9f112efdd6fd632c7594aa082d7f9f', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '577085a6007e5e2c6b291bbe0a27c0ff4ec4ca78', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: 'c6b51b60d1bcc06e537800c10946ac49639fcb2c', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '836008030a0d66533ffba9392fee0234a9b0b425', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: 'a602cb65934157c171201f01699aacf1eeee8a57', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: '0c1a368d4e878b2942f2b37ddff47ac13262c580', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: '31cfa57cd8890a7cd70209c771598d6350009cc6', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && useDatePicker.today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);

package/dist/cjs/sd-date-picker-trigger.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
 const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:0;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
@@ -40,10 +40,10 @@ const SdDatePickerTrigger = class {
                 ? sdDatePicker_config.DATEPICKER_COLORS.icon.disabled
                 : sdDatePicker_config.DATEPICKER_COLORS.icon.default,
         };
-        return (index.h("div", { key: '5d8508069232bba144bfb9480b0befe420a3392b', class: {
+        return (index.h("div", { key: 'ebe886b3df3b50c53d31081f6ad7e251721b5cb1', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, index.h("sd-icon", { key: '71131e34dd1225e9633395041f7a768c020343bd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '192520646e181add5f87f6ce1d3a5caf8556b163', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, index.h("sd-icon", { key: '563d3bb0221d5ba17788e1fa1e970fd2d702a4fd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '3bfc4c6671e70571a4b71a62cf0fd78f0297027f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
 };
 SdDatePickerTrigger.style = sdDatePickerTriggerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-nsQP24mV.js');
+var index = require('./index-B2QvhbC3.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
@@ -102,9 +102,9 @@ const SdDatePicker = class {
             '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: '693c0c75e6b0a9ee8323f4be7ec101592e586372', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, 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, size: this.size, 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("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', class: "sd-date-picker", ref: el => {
+        return (index.h("sd-field", { key: '1a84754cdc67bd6603e1fb48479f9d3ac6424d6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, 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, size: this.size, 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("div", { key: 'e4d8e05b04ac7bd4f2f96809b33d67125fe7c6d8', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: '0109eb0326655018bc02cc373e766ffdada85ff0', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, index.h("sd-date-picker-trigger", { key: '244924af2c3ea207b2a90c5aef5064755da3ae52', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'f3d882d3450f629b6ed501b984d89ffd9633531f', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: 'a0f47851a27dd777f77da40f3258638a0fbc37a5', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{