@sellmate/design-system 1.27.1 → 1.29.0

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 var component_field = require('./component.field-C7it8cZm.js');
-var tooltipArrow = require('./tooltipArrow-FLiD3ceS.js');
+var tooltipArrow = require('./tooltipArrow-DOOcBlLp.js');
 
 const FIELD_ADDON_ALIGN_MAP = {
     start: 'flex-start',
@@ -244,19 +244,19 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (index.h("div", { key: 'bce0bc8ccc19e41c2a61980bd12f07d7f8838569', class: {
+        return (index.h("div", { key: '7474477aa89e459e5f31cc085e855db6d1851822', class: {
                 'sd-field': true,
                 'sd-field--has-label': this.label !== '',
                 'sd-field--has-addon': addon !== '',
                 'sd-field--borderless': this.borderless,
                 [this.fieldStatus]: this.fieldStatus !== '',
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, index.h("div", { key: 'c6c4e3ec6e018ebd0dc6fbbae5fbaef4ea6503e5', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'bd778a24325412924e0a331db592535e4b4e542b', class: "sd-field__main" }, index.h("div", { key: '485cfbdbfa7299cb27d84e61306d6e2cf196d071', class: {
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, index.h("div", { key: '9bea489357731d9630753e552a73e98ff85a47d8', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '582b762cea494f2987381eebfcdd9cab9c6dd3e0', class: "sd-field__main" }, index.h("div", { key: '24f1b2ffa75077573178de296be26c48d5f36958', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
             }, style: this.width !== '' && this.width !== 0
                 ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }
-                : {} }, addon && (index.h("div", { key: '510238ac22b7e923724cc20abf2541adbddcb594', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: '2cca5b62cbe56050acd536764c33cbc3009f740b', name: this.icon.name, size: this.icon.size ??
-                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), index.h("slot", { key: '470c0d559409a11f1c5650e88a50555a4656d3f9' })), this.errorMsg !== '' || this.errorMessage !== '' ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && index.h("div", { class: "sd-field__hint" }, this.hint))))));
+                : {} }, addon && (index.h("div", { key: 'ace4b56d75bbaff3335694b6549b383a023d9125', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: 'aba7a6c3834f73be2c1be1e82f4673aad317c383', name: this.icon.name, size: this.icon.size ??
+                Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate })), addon)), index.h("slot", { key: '4a3776fc53bc003cc5b54696a8353668ce306a0c' })), this.errorMsg !== '' || this.errorMessage !== '' ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg !== '' ? this.errorMsg : this.errorMessage)) : (this.hint !== '' && index.h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (label == null || label === '')
@@ -267,7 +267,7 @@ const SdField = class {
 };
 SdField.style = sdFieldCss();
 
-const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu--has-close .sd-floating-menu__content{padding-right:28px}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 16px;border-radius:6px;font-size:12px;font-weight:500;line-height:20px;position:relative;box-sizing:border-box;background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);animation:sd-floating-fade-in 0.35s ease-out}.sd-floating-menu--top{animation-name:sd-floating-slide-top}.sd-floating-menu--bottom{animation-name:sd-floating-slide-bottom}.sd-floating-menu--left{animation-name:sd-floating-slide-left}.sd-floating-menu--right{animation-name:sd-floating-slide-right}.sd-floating-menu .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--default{background:var(--sd-floating-bg, #07284A);color:var(--sd-floating-content, #FFFFFF);font-weight:500}.sd-floating-menu--default .sd-floating-menu__arrow{color:var(--sd-floating-bg, #07284A)}.sd-floating-menu--danger{background:var(--sd-floating-bg, #FCE6E6);color:var(--sd-floating-content, #FB4444);font-weight:700}.sd-floating-menu--danger .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FCE6E6)}.sd-floating-menu--warning{background:var(--sd-floating-bg, #FEF1EA);color:var(--sd-floating-content, #FF6B00);font-weight:700}.sd-floating-menu--warning .sd-floating-menu__arrow{color:var(--sd-floating-bg, #FEF1EA)}.sd-floating-menu--accent{background:var(--sd-floating-bg, #E6F1FF);color:var(--sd-floating-content, #0075FF);font-weight:700}.sd-floating-menu--accent .sd-floating-menu__arrow{color:var(--sd-floating-bg, #E6F1FF)}.sd-floating-menu__arrow{position:absolute;display:flex;width:16px;height:12px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-12px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-12px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-12px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-12px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--with-link{justify-content:space-between}.sd-floating-menu--popover{padding:16px 20px;box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.1)}.sd-floating-menu--popover .sd-floating-menu__content{gap:4px}.sd-floating-menu--popover .sd-floating-menu__title{font-size:14px;font-weight:700;line-height:24px}.sd-floating-menu--popover .sd-floating-menu__messages{font-size:12px;font-weight:500;line-height:20px}.sd-floating-menu--closing{animation:sd-floating-fade-out 0.15s ease-in forwards}.sd-floating-menu--closing.sd-floating-menu--top{animation-name:sd-floating-slide-out-top}.sd-floating-menu--closing.sd-floating-menu--bottom{animation-name:sd-floating-slide-out-bottom}.sd-floating-menu--closing.sd-floating-menu--left{animation-name:sd-floating-slide-out-left}.sd-floating-menu--closing.sd-floating-menu--right{animation-name:sd-floating-slide-out-right}.sd-floating-menu--has-close .sd-floating-menu__content{padding-right:28px}.sd-floating-menu__close-button{position:absolute;top:12px;right:12px}@keyframes sd-floating-fade-out{from{opacity:1}to{opacity:0}}@keyframes sd-floating-slide-out-top{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes sd-floating-slide-out-bottom{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@keyframes sd-floating-slide-out-left{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4px)}}@keyframes sd-floating-slide-out-right{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4px)}}@keyframes sd-floating-fade-in{from{opacity:0}to{opacity:1}}@keyframes sd-floating-slide-top{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-bottom{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes sd-floating-slide-left{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}@keyframes sd-floating-slide-right{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}`;
 
 const SdFloatingPopover = class {
     constructor(hostRef) {
@@ -447,7 +447,7 @@ const SdFloatingPopover = class {
         }
     }
     render() {
-        return index.h("slot", { key: '487d3c23320bd5f44492e3fb84e3cb357605de39' });
+        return index.h("slot", { key: '3a3234d89652728a077681775de4f8c14141ab2d' });
     }
 };
 SdFloatingPopover.style = sdFloatingPortalCss();
@@ -623,7 +623,7 @@ const SdTooltip = class {
         const bodyHTML = this.message && this.message.length > 0
             ? this.message.map(line => `<div>${line}</div>`).join('')
             : this.slotContentHTML;
-        return (index.h(index.Fragment, { key: '682acd0035e35645b1ddcb5b9bfa796f135d26ce' }, index.h("div", { key: '63550c550389759026812d624bfb8fc152a61dfa', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (index.h("slot", { name: "anchor" })) : hasLabel ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', 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: '84c71d8f766d79831e262810918085de1cb76a69', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '622676ac69e0563623a7dfa6ebb9f8d0b8d7761d', ref: el => (this.menuEl = el), class: {
+        return (index.h(index.Fragment, { key: '9c6adbf151f6c36536406809cf8714db7ced8d5e' }, index.h("div", { key: '38abb48e4f209a6ef8d587c3b0d9c9158e76f7c3', ref: el => (this.triggerEl = el), class: triggerClasses, ...divTrigger }, anchorMode ? (index.h("slot", { name: "anchor" })) : hasLabel ? (index.h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', 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: '178f37ef8d28dcdbc527f9d3f8b2bdc45774afd4', parentRef: anchorMode ? this.triggerEl : this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '4d2990d20f35694c95b6627d6ddee106d9b707c2', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
@@ -631,7 +631,7 @@ const SdTooltip = class {
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, index.h("i", { key: 'e81b686f152e408e7affc9181e2a19cb0aece8cd', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: 'a91ee4a5c1b2564b63d061c32f5013be6f28b0d0' })), index.h("div", { key: '77671787b0ee0beb851c7a35a04f8df826b268a8', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (index.h("sd-ghost-button", { key: '74e41984b8589dba31feb6f269c4ce7ed8fe3c6f', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
+            }, onMouseEnter: () => this.openTooltip(), onMouseLeave: () => !this.useClose && this.startHideTimer() }, index.h("i", { key: 'ee1366c6550c30c9a9a741763bef9a3dfe8ee4e1', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '7d0ea9d040b56e4a136b448144b447154372a526' })), index.h("div", { key: '1e62996b156a848cf0b202740602258aa8e5c6c7', class: "sd-floating-menu__content", innerHTML: bodyHTML }), this.useClose && (index.h("sd-ghost-button", { key: '86e6796421c16a970cee038d72386f68972733e1', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xxs", onClick: () => this.closeTooltip() })))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 
 const SdForm = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 
 const ghostButton = {
 	xxs: {
@@ -545,8 +545,7 @@ const tag = {
 	grey: {
 		content: "#737373",
 		bg: "#EEEEEE"
-	}
-};
+	}};
 var tagTokens = {
 	tag: tag
 };
@@ -700,7 +699,7 @@ const SdTag = class {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
         const width = this.resolvedWidth;
-        return (index.h(index.Host, { key: '37bb1fefd51f583b0a9dde9fe46cf843a48e8e13', style: width != null ? { '--sd-tag-width': width } : undefined }, index.h("span", { key: 'e996471849834802eaeff02abaadee1a2addac4f', class: "sd-tag", style: {
+        return (index.h(index.Host, { key: '9eb41b65a887a524d22e0a2663292de1f12674f6', style: width != null ? { '--sd-tag-width': width } : undefined }, index.h("span", { key: '2c08b419141250c00e6ef1aec1c691c1a41434c0', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -710,7 +709,7 @@ const SdTag = class {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '2e63073d1950046747521071ba5db5f9a404acef', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '5041322f15e5273cc3129f57958dc97fdce8c50c', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode)));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
-var system = require('./system-MjrAugX-.js');
+var index = require('./index-iiJZMzVM.js');
+var system = require('./system-B4KkVpu2.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 
 const guide = {
@@ -40,9 +40,6 @@ const guide = {
 		title: {
 			gap: "8"
 		},
-		row: {
-			gap: "8"
-		},
 		body: {
 			gap: "2"
 		},
@@ -91,7 +88,6 @@ const GUIDE_CONFIG = {
         paddingX: `${contents.paddingX}px`,
         paddingY: `${contents.paddingY}px`,
         gap: `${contents.gap}px`,
-        rowGap: `${contents.row.gap}px`,
         bodyGap: `${contents.body.gap}px`,
         titleGap: `${contents.title.gap}px`,
         radius: `${contents.radius}px`,
@@ -107,7 +103,7 @@ const GUIDE_CONFIG = {
     },
 };
 
-const sdGuideCss = () => `@charset "UTF-8";sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap);--sd-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip);--sd-button-bg-hover:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion);--sd-button-bg-hover:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-1:not(:first-child){margin-top:var(--sd-guide-contents-row-gap)}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
+const sdGuideCss = () => `@charset "UTF-8";sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide{display:inline-flex;align-items:center;height:fit-content;width:fit-content}.sd-guide .sd-guide__button .sd-button{min-height:var(--sd-guide-button-height);padding:0 var(--sd-guide-button-padding-x);border-radius:var(--sd-guide-button-radius);border:var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);background:var(--sd-guide-button-bg-default);color:var(--sd-guide-button-text-default) !important;transition:none;display:flex;align-items:center;gap:var(--sd-guide-button-gap);--sd-button-bg-hover:var(--sd-guide-button-bg-default);--sd-button-current-icon:var(--sd-guide-button-icon-color-default)}.sd-guide .sd-guide__button .sd-button .sd-button__content{color:var(--sd-guide-button-text-default) !important;gap:var(--sd-guide-button-gap)}.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label{margin-left:0;color:var(--sd-guide-button-text-default) !important;font-size:var(--sd-guide-button-font-size);font-weight:var(--sd-guide-button-font-weight);line-height:var(--sd-guide-button-line-height)}.sd-guide .sd-guide__button--type-notion .sd-button{--sd-button-current-icon:var(--sd-guide-button-icon-color-notion)}.sd-guide .sd-guide__button--active .sd-button{color:var(--sd-guide-button-text-active) !important;--sd-button-current-icon:var(--sd-guide-button-icon-color-active)}.sd-guide .sd-guide__button--active .sd-button .sd-button__content{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label{color:var(--sd-guide-button-text-active) !important}.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-tip);border-color:var(--sd-guide-button-bg-tip);--sd-button-bg-hover:var(--sd-guide-button-bg-tip)}.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button{background:var(--sd-guide-button-bg-notion);border-color:var(--sd-guide-button-bg-notion);--sd-button-bg-hover:var(--sd-guide-button-bg-notion)}.sd-guide__popup{position:relative;padding:var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);border-radius:var(--sd-guide-contents-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.1);background:white}.sd-guide__popup>.sd-guide__popup__close{position:absolute;top:12px;right:12px}.sd-guide__popup__header{display:flex;align-items:center;gap:var(--sd-guide-contents-title-gap);margin-bottom:var(--sd-guide-contents-gap)}.sd-guide__popup__header .sd-guide__popup__title{margin-top:0;margin-bottom:0;font-size:var(--sd-guide-contents-title-font-size);font-weight:var(--sd-guide-contents-title-font-weight);line-height:var(--sd-guide-contents-title-line-height);color:var(--sd-guide-contents-text-color)}.sd-guide__popup__list{width:100%;padding:0;margin:0}.sd-guide__popup__list__item{display:flex;width:100%;align-items:start;list-style:none;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height)}.sd-guide__popup__list__item p{width:100%;padding:0;margin:0;word-wrap:break-word;word-break:break-word;white-space:normal;overflow-wrap:break-word;min-width:0}.sd-guide__popup__list__item::before{display:block;content:"-";width:6px;color:var(--sd-guide-contents-text-color);font-size:var(--sd-guide-contents-body-font-size);font-weight:var(--sd-guide-contents-body-font-weight);line-height:var(--sd-guide-contents-body-line-height);margin-left:10px;margin-right:12px;flex-shrink:0}.sd-guide__popup__list__item--depth-2{margin-top:var(--sd-guide-contents-body-gap)}.sd-guide__popup__list__item--depth-2::before{content:"•"}.sd-guide__popup__list__item--depth-2{padding-left:26px}`;
 
 const DEFAULT_LABEL_BY_TYPE = {
     tip: '활용 TIP',
@@ -171,7 +167,6 @@ const SdGuide = class {
             '--sd-guide-contents-padding-x': contents.paddingX,
             '--sd-guide-contents-padding-y': contents.paddingY,
             '--sd-guide-contents-gap': contents.gap,
-            '--sd-guide-contents-row-gap': contents.rowGap,
             '--sd-guide-contents-body-gap': contents.bodyGap,
             '--sd-guide-contents-title-gap': contents.titleGap,
             '--sd-guide-contents-radius': contents.radius,
@@ -194,10 +189,10 @@ const SdGuide = class {
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (index.h("div", { key: 'd89a517d78a8f9624c94d320291e5a4b5bd0715d', class: "sd-guide", style: this.guideStyle }, index.h("sd-button", { key: '6e959f0f5fd6f816fd1cef4545852b860d30de85', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (index.h("sd-portal", { key: 'a837cababa5504400293729ad28e4dcd2450eeec', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '61dd3c574495f85021495d80865e162999368f9c', class: "sd-guide__popup", style: {
+        return (index.h("div", { key: '7d85d4650de1bef19699cdacaceeeab69a7f221c', class: "sd-guide", style: this.guideStyle }, index.h("sd-button", { key: 'b4cd191ba9593ce83343097e9b24fb56d86c6859', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), name: isActive ? 'primary_sm' : 'neutral_outline_sm', label: this.label || defaultLabel, icon: iconName, onSdClick: this.handleClickGuide }), this.popupShow && (index.h("sd-portal", { key: '2523de8af47987b2f0761c999817bf1ca595b4e6', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, index.h("div", { key: '2fcc5a768d626d5ba97427ad99dc1c6155b5c36b', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
                 width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
-            } }, index.h("sd-ghost-button", { key: 'dbf8aebd1be4b5286bf726d22e0a5f80c29e867f', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), index.h("div", { key: '5a08fa823bb8839e654d7bb2ba027df2dc68b85b', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: '1dda43d100b4f5f3b7fa81115a1ac4bfbd584a51', name: iconName, size: 24, color: popupIconColor }), index.h("h3", { key: 'cfe6342f44f4e1355397ed94d6db74807f917548', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), index.h("ul", { key: '9acc2f507ed3d3d6f1fda27a9e5cf66dcc2f619d', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
+            } }, index.h("sd-ghost-button", { key: 'de6b053ff6373bf2690d0874d01692e456a38991', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), index.h("div", { key: '10f2de0819a6a97571719ca2e04101833c78f1d3', class: "sd-guide__popup__header" }, index.h("sd-icon", { key: 'b11478e02574f5e211cd9d2478080d2c9895cb5d', name: iconName, size: 24, color: popupIconColor }), index.h("h3", { key: 'ef361769bc0363ebb7215b6fbd1fdb38b2864434', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), index.h("ul", { key: '914ae5fa0fa7ae52954df58e17beb187ddc2a966', class: "sd-guide__popup__list" }, this.renderListItem(this.message)))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

package/dist/cjs/sd-key-value-table.cjs.entry.js

@@ -1,16 +1,59 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
-var system = require('./system-MjrAugX-.js');
-var component_table = require('./component.table-BrI3b--h.js');
+var index = require('./index-iiJZMzVM.js');
+var system = require('./system-B4KkVpu2.js');
 
-const t = component_table.tableTokens.table;
+const table = {
+	header: {
+		paddingX: "16",
+		gap: "4",
+		bg: "#F5FAFF",
+		typography: {
+			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",
+			lineHeight: "20"}},
+	body: {
+		typography: {
+			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",
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"}
+	},
+	border: {
+		color: "#E1E1E1",
+		width: "1"
+	},
+	content: {
+		gap: "8"
+	},
+	radius: "8",
+	keyValue: {
+		body: {
+			paddingY: "8",
+			paddingX: {
+				"default": "8",
+				wide: "16"
+			}
+		},
+		height: "44",
+		search: {
+			paddingX: "32",
+			bg: "#F9F9F9"
+		}
+	}};
+var tableTokens = {
+	table: table
+};
+
+const t = tableTokens.table;
 const KEY_VALUE_TABLE_LAYOUT = {
     rowHeight: Number(t.keyValue.height),
     thWidth: 120,
     borderRadius: Number(t.radius),
     thPaddingX: Number(t.header.paddingX),
     padding: Number(t.keyValue.body.paddingY),
+    tdPaddingX: Number(t.keyValue.body.paddingX.default),
+    tdPaddingXWide: Number(t.keyValue.body.paddingX.wide),
     helpIconSize: 16,
     requiredIconSize: 12,
     gap: Number(t.header.gap),
@@ -39,7 +82,7 @@ const KEY_VALUE_TABLE_TYPOGRAPHY = {
     tdLineHeight: Number(t.body.typography.lineHeight),
 };
 
-const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
+const sdKeyValueTableCss = () => `sd-key-value-table{display:block}sd-key-value-table .sd-key-value-table__wrapper{display:flex;align-items:stretch;width:100%;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);overflow:hidden}sd-key-value-table .sd-key-value-table__wrapper .sd-key-value-table{flex:1 1 auto;border:0;border-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table__wrapper.sd-key-value-table__wrapper--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__search-panel{display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:var(--sd-kvt-padding) var(--sd-kvt-search-padding-x);background:var(--sd-kvt-search-bg);border-left:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table{width:100%;table-layout:fixed;border:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color);border-radius:var(--sd-kvt-radius);border-collapse:separate;border-spacing:0;overflow:hidden}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-useTop{border-top-left-radius:0;border-top-right-radius:0}sd-key-value-table .sd-key-value-table.sd-key-value-table--radius-full{border-radius:0}sd-key-value-table .sd-key-value-table__th,sd-key-value-table .sd-key-value-table__td{height:var(--sd-kvt-row-height);box-sizing:border-box;vertical-align:middle;text-align:left;font-weight:normal;border-top:var(--sd-kvt-border-width) solid var(--sd-kvt-border-color)}sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__th,sd-key-value-table .sd-key-value-table tbody>tr:first-child>.sd-key-value-table__td{border-top:0}sd-key-value-table .sd-key-value-table__th{padding:var(--sd-kvt-padding) var(--sd-kvt-th-padding-x);width:var(--sd-kvt-th-width);background:var(--sd-kvt-th-bg);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__th-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sd-kvt-gap);width:100%;height:100%}sd-key-value-table .sd-key-value-table__label{display:inline-flex;align-items:center;gap:var(--sd-kvt-label-gap);font-family:var(--sd-kvt-label-font-family);font-size:var(--sd-kvt-label-font-size);font-weight:var(--sd-kvt-label-font-weight);line-height:var(--sd-kvt-label-line-height);color:var(--sd-kvt-th-color)}sd-key-value-table .sd-key-value-table__required{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__help{display:inline-flex;align-items:center;flex-shrink:0}sd-key-value-table .sd-key-value-table__td{padding:var(--sd-kvt-padding) var(--sd-kvt-td-padding-x);background:var(--sd-kvt-td-bg);color:var(--sd-kvt-td-color)}sd-key-value-table .sd-key-value-table__td--text{padding-left:var(--sd-kvt-td-padding-x-wide);padding-right:var(--sd-kvt-td-padding-x-wide)}sd-key-value-table .sd-key-value-table__td-inner{display:flex;align-items:center;width:100%;height:100%}sd-key-value-table .sd-key-value-table__td-inner>slot{display:block;flex:1 1 auto;min-width:0}sd-key-value-table .sd-key-value-table__td-inner sd-input,sd-key-value-table .sd-key-value-table__td-inner sd-textarea,sd-key-value-table .sd-key-value-table__td-inner sd-number-input,sd-key-value-table .sd-key-value-table__td-inner sd-select,sd-key-value-table .sd-key-value-table__td-inner sd-date-picker,sd-key-value-table .sd-key-value-table__td-inner sd-date-range-picker,sd-key-value-table .sd-key-value-table__td-inner sd-file-picker{width:100%}sd-key-value-table .sd-key-value-table__text{font-family:var(--sd-kvt-td-font-family);font-size:var(--sd-kvt-td-font-size);font-weight:var(--sd-kvt-td-font-weight);line-height:var(--sd-kvt-td-line-height);color:var(--sd-kvt-td-color)}`;
 
 const SdKeyValueTable = class {
     constructor(hostRef) {
@@ -52,6 +95,12 @@ const SdKeyValueTable = class {
      * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
      */
     fields = [];
+    /**
+     * field name을 key로 하는 값 객체 (`{ [name]: value }`).
+     * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
+     * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
+     */
+    values = {};
     /**
      * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
      */
@@ -63,44 +112,57 @@ const SdKeyValueTable = class {
      * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
     radius = 'default';
-    /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
+    /** 필드 값이 변경될 때 `{ name, value, values }` 형태로 발생합니다. `values`는 갱신된 전체 값 객체입니다. */
     change;
     /** search 패널의 검색 버튼 클릭 시 발생합니다. */
     searchEvent;
     emit = (name, value) => {
-        this.change.emit({ name, value });
+        this.change.emit({
+            name,
+            value: value,
+            values: { ...this.values, [name]: value },
+        });
     };
+    /** values prop이 해당 field를 가지면 그 값을, 없으면 field.options.value를 사용. */
+    resolveOptions(field) {
+        const options = { ...(field.options ?? {}) };
+        if (Object.prototype.hasOwnProperty.call(this.values, field.name)) {
+            options.value = this.values[field.name];
+        }
+        return options;
+    }
     handleSearchClick = () => {
         this.searchEvent.emit();
     };
     renderField(field) {
         const onSdUpdate = (e) => this.emit(field.name, e.detail);
+        const options = this.resolveOptions(field);
         switch (field.type) {
             case 'input':
-                return index.h("sd-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'textarea':
-                return index.h("sd-textarea", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-textarea", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'number-input':
-                return index.h("sd-number-input", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-number-input", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'select':
-                return index.h("sd-select", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-select", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'radio': {
-                const { value, direction, ...rest } = field.options ?? {};
+                const { value, direction, ...rest } = options;
                 return (index.h("sd-radio-group", { ...rest, value: value, direction: direction ?? 'horizontal', onSdUpdate: onSdUpdate }));
             }
             case 'checkbox': {
-                const { value, ...rest } = field.options ?? {};
+                const { value, ...rest } = options;
                 return index.h("sd-checkbox", { ...rest, value: value, onSdUpdate: onSdUpdate });
             }
             case 'date-picker':
-                return index.h("sd-date-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-date-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'date-range-picker':
-                return (index.h("sd-date-range-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate }));
+                return index.h("sd-date-range-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'file-picker':
-                return index.h("sd-file-picker", { width: "100%", ...(field.options ?? {}), onSdUpdate: onSdUpdate });
+                return index.h("sd-file-picker", { width: "100%", ...options, onSdUpdate: onSdUpdate });
             case 'text':
             default:
-                return index.h("span", { class: "sd-key-value-table__text" }, field.options?.value ?? '');
+                return index.h("span", { class: "sd-key-value-table__text" }, options.value ?? '');
         }
     }
     renderHelpIcon(helpText) {
@@ -189,7 +251,13 @@ const SdKeyValueTable = class {
     renderTd(field, r, c) {
         const tdRowSpan = field.tdRowSpan != null && field.tdRowSpan > 1 ? field.tdRowSpan : undefined;
         const tdColSpan = field.tdColSpan != null && field.tdColSpan > 1 ? field.tdColSpan : undefined;
-        return (index.h("td", { key: `td-${r}-${c}`, class: "sd-key-value-table__td", rowSpan: tdRowSpan, colSpan: tdColSpan }, index.h("div", { class: "sd-key-value-table__td-inner" }, index.h("slot", { name: `field-${field.name}` }, this.renderField(field)))));
+        // text 타입(및 미지정 기본값)은 읽기 전용 콘텐츠라 넓은 paddingX(wide) 적용.
+        // 폼 필드 셀은 default paddingX 유지.
+        const isText = field.type == null || field.type === 'text';
+        return (index.h("td", { key: `td-${r}-${c}`, class: {
+                'sd-key-value-table__td': true,
+                'sd-key-value-table__td--text': isText,
+            }, rowSpan: tdRowSpan, colSpan: tdColSpan }, index.h("div", { class: "sd-key-value-table__td-inner" }, index.h("slot", { name: `field-${field.name}` }, this.renderField(field)))));
     }
     warnDuplicateNames() {
         const seen = new Set();
@@ -214,6 +282,8 @@ const SdKeyValueTable = class {
             '--sd-kvt-radius': `${KEY_VALUE_TABLE_LAYOUT.borderRadius}px`,
             '--sd-kvt-th-padding-x': `${KEY_VALUE_TABLE_LAYOUT.thPaddingX}px`,
             '--sd-kvt-padding': `${KEY_VALUE_TABLE_LAYOUT.padding}px`,
+            '--sd-kvt-td-padding-x': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingX}px`,
+            '--sd-kvt-td-padding-x-wide': `${KEY_VALUE_TABLE_LAYOUT.tdPaddingXWide}px`,
             '--sd-kvt-gap': `${KEY_VALUE_TABLE_LAYOUT.gap}px`,
             '--sd-kvt-label-gap': `${KEY_VALUE_TABLE_LAYOUT.labelGap}px`,
             '--sd-kvt-border-width': `${KEY_VALUE_TABLE_LAYOUT.borderWidth}px`,

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 var component_progress = require('./component.progress-DimGJZAd.js');
-var system = require('./system-MjrAugX-.js');
+var system = require('./system-B4KkVpu2.js');
 
 const LINEAR_PROGRESS_COLORS = {
     track: component_progress.progressTokens.progress.color.track,
@@ -52,7 +52,7 @@ const SdLinearProgress = class {
             clipPath: `inset(0 ${100 - this.clampedValue}% 0 0)`,
         };
         const valueText = `${Math.round(this.clampedValue)}%`;
-        return (index.h(index.Host, { key: '8d19b1c846b14994eceb6381802b19fa92a241cb', style: hostStyle }, index.h("div", { key: '23d3e839b1e64a81ae86e994bf77a0e9bf53e870', class: "sd-linear-progress__track" }, index.h("div", { key: '92ea4d28c312e639ec038002beeea60ab39e42bb', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'd65a8726f14302260d0fad1b3a16ba7e8588530f', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: '522efd6e3b6f6bbfcb8044113d2e2ae37da84dd6', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: '2933b26dc95c1962dc19829f9bf1d8e62d71b0c4', class: "sd-linear-progress__label" }, this.label)));
+        return (index.h(index.Host, { key: 'fb7aacfafc15a5570717f4ba13cd7d6a8193375a', style: hostStyle }, index.h("div", { key: '7a054e0cac8fcc757c15871ff4d2305a8d190fb9', class: "sd-linear-progress__track" }, index.h("div", { key: '35b45b58b899e4c7201bf39783d3d4c6be42ede5', class: "sd-linear-progress__fill", style: fillStyle }), !this.indeterminate && (index.h("span", { key: 'a9b44e03fe2446fe8dbfd9bbd6801d6b9bebfc10', class: "sd-linear-progress__value sd-linear-progress__value--on-track" }, valueText)), !this.indeterminate && (index.h("span", { key: '363bacb116ca51417892f9f49db58360a97899c4', class: "sd-linear-progress__value sd-linear-progress__value--on-fill", style: valueOnFillStyle }, valueText))), this.label && index.h("span", { key: 'c8b9c15d2eb85ca1ac46ba8983ae399661012f31', class: "sd-linear-progress__label" }, this.label)));
     }
 };
 SdLinearProgress.style = sdLinearProgressCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 
@@ -40,10 +40,10 @@ const SdLoadingContainer = class {
         this.prevBodyOverflow = null;
     }
     render() {
-        return (index.h("div", { key: '7abf314b6518ab7e6ba0ef60236a8ca6846b0cf4', class: {
+        return (index.h("div", { key: '89949c219d7ace3858c7539f3db4843a20a2c67e', class: {
                 'sd-loading-container': true,
                 'sd-loading-container--visible': this.visible,
-            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '5c049ffd686654fb4c63bba829bcbe4968285a74', class: "sd-loading-container__backdrop" }), index.h("div", { key: '21c50b87eac65eedfe2ae475eda2c04a9b2f781d', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: '1dd29e83461be200d3d23037fc8965dbba675e77', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: 'deb08b4813d784cf47f43648e8187b22b143dfd5', class: "sd-loading-container__message" }, this.message))));
+            }, "aria-hidden": this.visible ? 'false' : 'true' }, index.h("div", { key: '0c538680987653059a8baae6e6f6d2b7dabeda69', class: "sd-loading-container__backdrop" }), index.h("div", { key: '8b5b01c51e97d9ebdd63be32aff8f228449c1e47', class: "sd-loading-container__content" }, index.h("sd-circle-progress", { key: 'ccf47434cf4c7b3e948cc10741e63fe362bd9316', indeterminate: true, type: "inverse" }), this.message && index.h("p", { key: 'db63acff8b44e5725e9c8e29fed7d9957f18aa9d', class: "sd-loading-container__message" }, this.message))));
     }
 };
 SdLoadingContainer.style = sdLoadingContainerCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DsYLSqCp.js');
+var index = require('./index-iiJZMzVM.js');
 var modalStack = require('./modal-stack-DucFLON7.js');
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
@@ -257,7 +257,21 @@ const SdModalContainer = class {
         if (this.hasOwnProp(options, 'bottomMessage'))
             el.bottomMessage = options.bottomMessage ?? [];
         if (this.hasOwnProp(options, 'tagContents'))
-            el.tagContents = options.tagContents;
+            this.setSlotContent(el, 'tag', options.tagContents);
+        if (this.hasOwnProp(options, 'optionContents')) {
+            this.setSlotContent(el, 'option', options.optionContents);
+        }
+    }
+    /** confirm 모달의 named slot(tag/option) 위치에 HTMLElement 를 light-DOM 으로 주입한다. */
+    setSlotContent(el, slot, content) {
+        Array.from(el.children).forEach(child => {
+            if (child.getAttribute('slot') === slot)
+                child.remove();
+        });
+        if (content) {
+            content.setAttribute('slot', slot);
+            el.appendChild(content);
+        }
     }
     handleBackdropClick(id) {
         if (!modalStack.isTopInteractiveModal(id))