@sellmate/design-system 1.15.0 → 1.16.0

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var component_field = require('./component.field-YIQ9TAhV.js');
-var tooltipArrow = require('./tooltipArrow-CyyaX9aS.js');
+var tooltipArrow = require('./tooltipArrow-D3P3JC08.js');
 
 const FIELD_ADDON_ALIGN_MAP = {
     start: 'flex-start',
@@ -30,7 +30,7 @@ const FIELD_LABEL_SIZE_MAP = {
     },
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--readonly .sd-field__wrapper .sd-field__control{background-color:var(--sd-system-color-field-bg-read-only);color:var(--sd-system-color-field-text-read-only)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;flex-shrink:0;width:var(--sd-field-label-width, auto);height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap);flex-shrink:0}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;justify-content:var(--sd-field-addon-justify, flex-start);white-space:nowrap;box-sizing:border-box;flex-shrink:0;width:var(--sd-field-addon-width, auto);padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled):not(.sd-field--readonly) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus:not(.sd-field--readonly) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-field-error-message-color);font-size:var(--sd-field-error-message-font-size);line-height:var(--sd-field-error-message-line-height);margin-top:var(--sd-field-message-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-field-hint-color);font-size:var(--sd-field-hint-font-size);line-height:var(--sd-field-hint-line-height);margin-top:var(--sd-field-message-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-input',
@@ -173,6 +173,15 @@ const SdField = class {
             '--sd-field-control-radius': `var(--sd-system-radius-field-${size})`,
             '--sd-field-label-margin-right': `var(--sd-system-space-field-${size}-gap)`,
         };
+        const messageCssVars = {
+            '--sd-field-error-message-color': component_field.fieldTokens.field.errorMessage.color,
+            '--sd-field-error-message-font-size': `${component_field.fieldTokens.field.errorMessage.typography.fontSize}px`,
+            '--sd-field-error-message-line-height': `${component_field.fieldTokens.field.errorMessage.typography.lineHeight}px`,
+            '--sd-field-hint-color': component_field.fieldTokens.field.hint.color,
+            '--sd-field-hint-font-size': `${component_field.fieldTokens.field.hint.typography.fontSize}px`,
+            '--sd-field-hint-line-height': `${component_field.fieldTokens.field.hint.typography.lineHeight}px`,
+            '--sd-field-message-gap': `${component_field.fieldTokens.field.contents.gap}px`,
+        };
         const labelCssVars = this.label !== ''
             ? {
                 '--sd-field-label-height': `${labelTokens.height}px`,
@@ -207,21 +216,21 @@ const SdField = class {
                     : {}),
             }
             : {};
-        return (index.h("div", { key: 'b2a4122378dd725d8b392b89ae44669f097ff767', class: {
+        return (index.h("div", { key: 'a04858364c6b9afceedba2f5d7ee0e289a6b6782', 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: 'ae6ead740a745248f89a3b9049480954091f5991', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '42699ddc5eb366d035986274dcf3ae7c17396e9c', class: "sd-field__main", style: this.width !== '' && this.width !== 0
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars, ...messageCssVars } }, index.h("div", { key: '898f5af4d213745257b2666cbea56db591792054', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '488ab5c290258d0139f677319f21a55bb6c63876', class: "sd-field__main", style: this.width !== '' && this.width !== 0
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, index.h("div", { key: 'f8c058d44411d27997e90bf3627a4b905f1a6112', class: {
+                : {} }, index.h("div", { key: 'db8c388dd2c4743a287f7567cde4015cafed1d95', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': addon !== '',
-            } }, addon && (index.h("div", { key: '86592d8a5046853eef3392e598c23d6348313e56', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: '147082f30f173615e9a4253e99eabae868960f6f', 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: 'a91c7c8ab0075f0cc1d2169b201bf37900872b99' })), 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: '1049369f52322fb1a4f1b4baf50b1e4ef2e9e59e', class: "sd-field__addon" }, this.icon && (index.h("sd-icon", { key: 'f0a28d9bdf97730088454c64b71b7cbc1d4dd875', 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: 'deee9ef5d166ab4d17451ad9d013b3b9d3d7aebe' })), 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 === '')

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 const ghostButton = {
 	xxs: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var system = require('./system-CdAyz3ej.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var system = require('./system-CdAyz3ej.js');
 var component_table = require('./component.table-DIxmbGBT.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var component_progress = require('./component.progress-Bmg3vAAy.js');
 var system = require('./system-CdAyz3ej.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.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}`;
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.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)}}`;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var constants = require('./constants-DJRV1upE.js');
 var sdTable_config = require('./sd-table.config-BjJW74Zx.js');
 require('./component.table-DIxmbGBT.js');

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
-var tooltipArrow = require('./tooltipArrow-CyyaX9aS.js');
+var index = require('./index-DXm0PH2A.js');
+var tooltipArrow = require('./tooltipArrow-D3P3JC08.js');
 
 const popover = {
 	"default": {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var system = require('./system-CdAyz3ej.js');
 
 const popup$1 = {

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 const radioButton = {
 	xs: {

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

@@ -1,15 +1,19 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 const radio = {
 	size: "16",
 	borderWidth: "1",
 	gap: "8",
 	typography: {
-		fontWeight: "400",
-		fontSize: "12",
-		lineHeight: "20"},
+		"default": {
+			fontWeight: "400",
+			fontSize: "12",
+			lineHeight: "20"},
+		selected: {
+			fontWeight: "500"}
+	},
 	bg: {
 		"default": "#FFFFFF",
 		disabled: "#E1E1E1",
@@ -27,7 +31,8 @@ const radio = {
 		size: "10"
 	},
 	label: {
-		"default": "#222222"
+		"default": "#222222",
+		disabled: "#888888"
 	}
 };
 var radioTokens = {
@@ -41,9 +46,14 @@ const RADIO_LAYOUT = {
     dotSize: radioTokens.radio.dot.size,
 };
 const RADIO_TYPOGRAPHY = {
-    fontSize: radioTokens.radio.typography.fontSize,
-    lineHeight: radioTokens.radio.typography.lineHeight,
-    fontWeight: radioTokens.radio.typography.fontWeight,
+    default: {
+        fontSize: radioTokens.radio.typography.default.fontSize,
+        lineHeight: radioTokens.radio.typography.default.lineHeight,
+        fontWeight: radioTokens.radio.typography.default.fontWeight,
+    },
+    selected: {
+        fontWeight: radioTokens.radio.typography.selected.fontWeight,
+    },
 };
 const RADIO_COLORS = {
     unchecked: {
@@ -61,10 +71,13 @@ const RADIO_COLORS = {
         border: radioTokens.radio.border.disabled,
         dot: radioTokens.radio.dot.disabled,
     },
-    label: radioTokens.radio.label.default,
+    label: {
+        default: radioTokens.radio.label.default,
+        disabled: radioTokens.radio.label.disabled,
+    },
 };
 
-const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height)}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}`;
+const sdRadioCss = () => `sd-radio{display:inline-flex;width:fit-content;height:var(--sd-radio-line-height);line-height:0}sd-radio .sd-radio{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-radio-gap);height:var(--sd-radio-line-height);max-height:var(--sd-radio-line-height)}sd-radio .sd-radio>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-radio .sd-radio>input:focus-visible+.sd-radio__circle{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-radio-checked-border);outline:none}sd-radio .sd-radio__circle{position:relative;width:var(--sd-radio-size);height:var(--sd-radio-size);border-radius:50%;border:var(--sd-radio-border-width) solid var(--sd-radio-unchecked-border);box-sizing:border-box;background:var(--sd-radio-unchecked-bg);display:inline-flex;flex-shrink:0}sd-radio .sd-radio__label{font-size:var(--sd-radio-font-size);font-weight:var(--sd-radio-font-weight);color:var(--sd-radio-label-color);line-height:var(--sd-radio-line-height);display:inline-flex;flex-direction:column}sd-radio .sd-radio__label::before{content:attr(data-label);height:0;font-weight:var(--sd-radio-selected-font-weight);visibility:hidden;overflow:hidden;user-select:none;pointer-events:none}sd-radio .sd-radio:hover:not(.sd-radio--disabled) .sd-radio__circle{background:var(--sd-radio-unchecked-bg-hover);border-color:var(--sd-radio-unchecked-border-hover)}sd-radio .sd-radio--checked .sd-radio__label{font-weight:var(--sd-radio-selected-font-weight)}sd-radio .sd-radio--checked .sd-radio__circle{border-color:var(--sd-radio-checked-border)}sd-radio .sd-radio--checked .sd-radio__circle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:var(--sd-radio-dot-size);height:var(--sd-radio-dot-size);border-radius:50%;background:var(--sd-radio-checked-dot)}sd-radio .sd-radio--disabled{cursor:not-allowed}sd-radio .sd-radio--disabled .sd-radio__label{color:var(--sd-radio-label-disabled-color)}sd-radio .sd-radio--disabled .sd-radio__circle{background:var(--sd-radio-disabled-bg);border-color:var(--sd-radio-disabled-border)}sd-radio .sd-radio--disabled.sd-radio--checked .sd-radio__circle::after{background:var(--sd-radio-disabled-dot)}`;
 
 const SdRadio = class {
     constructor(hostRef) {
@@ -83,10 +96,7 @@ const SdRadio = class {
         return String(this.val) === String(this.value);
     }
     get radioClasses() {
-        const classes = [
-            'sd-radio',
-            this.isSelected ? 'sd-radio--checked' : 'sd-radio--unchecked',
-        ];
+        const classes = ['sd-radio', this.isSelected ? 'sd-radio--checked' : 'sd-radio--unchecked'];
         if (this.disabled) {
             classes.push('sd-radio--disabled');
         }
@@ -104,9 +114,10 @@ const SdRadio = class {
             '--sd-radio-border-width': `${RADIO_LAYOUT.borderWidth}px`,
             '--sd-radio-gap': `${RADIO_LAYOUT.gap}px`,
             '--sd-radio-dot-size': `${RADIO_LAYOUT.dotSize}px`,
-            '--sd-radio-font-size': `${RADIO_TYPOGRAPHY.fontSize}px`,
-            '--sd-radio-line-height': `${RADIO_TYPOGRAPHY.lineHeight}px`,
-            '--sd-radio-font-weight': RADIO_TYPOGRAPHY.fontWeight,
+            '--sd-radio-font-size': `${RADIO_TYPOGRAPHY.default.fontSize}px`,
+            '--sd-radio-line-height': `${RADIO_TYPOGRAPHY.default.lineHeight}px`,
+            '--sd-radio-font-weight': RADIO_TYPOGRAPHY.default.fontWeight,
+            '--sd-radio-selected-font-weight': RADIO_TYPOGRAPHY.selected.fontWeight,
             '--sd-radio-unchecked-bg': RADIO_COLORS.unchecked.bg,
             '--sd-radio-unchecked-bg-hover': RADIO_COLORS.unchecked.bgHover,
             '--sd-radio-unchecked-border': RADIO_COLORS.unchecked.border,
@@ -116,9 +127,10 @@ const SdRadio = class {
             '--sd-radio-disabled-bg': RADIO_COLORS.disabled.bg,
             '--sd-radio-disabled-border': RADIO_COLORS.disabled.border,
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
-            '--sd-radio-label-color': RADIO_COLORS.label,
+            '--sd-radio-label-color': RADIO_COLORS.label.default,
+            '--sd-radio-label-disabled-color': RADIO_COLORS.label.disabled,
         };
-        return (index.h("label", { key: '68f1b169f2a7b072a92a64286fa88eff99313faf', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: 'fa2474cc359ef4f5480a68d9b5d0b6f151e7eec8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: '345f286e2f87e5dd0687fb94a59f6886eac25f24', class: "sd-radio__circle" }), this.label && index.h("span", { key: 'e8bd76682569820121c9469984f0054386d9b117', class: "sd-radio__label" }, this.label)));
+        return (index.h("label", { key: 'f403a1fd88109a6907cc37b03b35fe5a7bbafdfb', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("input", { key: 'ba8c105d6d52bc4452e1b9614f42dfa2d99221e1', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), index.h("span", { key: 'd92352c59bf7f144a68decd3652dc7208b813a0e', class: "sd-radio__circle" }), this.label && (index.h("span", { key: 'bc0b1384dee0b22efec56249edc88184a96c6efe', class: "sd-radio__label", "data-label": this.label }, this.label))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-select-list-item_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var sdSelect_config = require('./sd-select.config-DrJ4LNVz.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdSelect_config = require('./sd-select.config-DrJ4LNVz.js');
 var sanitizeInlineHtml = require('./sanitize-inline-html-CRCAeQ46.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 var switchTokens = {
 	"switch": {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var constants = require('./constants-DJRV1upE.js');
 var sdTable_config = require('./sd-table.config-BjJW74Zx.js');
 require('./component.table-DIxmbGBT.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 const tab = {
 	main: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 const textLink = {
 	sm: {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 const toast = {
 	icon: "16",

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dq1M20nt.js');
+var index = require('./index-DXm0PH2A.js');
 
 const toggle = {
 	height: "28",

package/dist/cjs/{tooltipArrow-CyyaX9aS.js → tooltipArrow-D3P3JC08.js}

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

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

@@ -6,6 +6,7 @@ export class SdChip {
     value = '';
     error = false;
     disabled = false;
+    editable = true;
     placeholder = '';
     rules = [];
     internalValue = '';
@@ -75,8 +76,15 @@ export class SdChip {
     async sdGetNativeElement() {
         return this.inputEl ?? null;
     }
+    /**
+     * SSR 환경에서 editable prop이 전달되지 않으면 undefined로 들어올 수 있으므로,
+     * false로 명시된 경우에만 편집 불가로 처리한다 (기본값 true).
+     */
+    get isEditable() {
+        return this.editable !== false;
+    }
     enterEditMode = () => {
-        if (this.disabled || this.isEditing)
+        if (this.disabled || this.isEditing || !this.isEditable)
             return;
         this.draftValue = this.internalValue;
         this.shouldInitInput = true;
@@ -107,12 +115,12 @@ export class SdChip {
         this.blur.emit();
     };
     handleChipClick = () => {
-        if (this.disabled || this.isEditing)
+        if (this.disabled || this.isEditing || !this.isEditable)
             return;
         this.enterEditMode();
     };
     handleChipKeyDown = (event) => {
-        if (this.disabled || this.isEditing)
+        if (this.disabled || this.isEditing || !this.isEditable)
             return;
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
@@ -207,12 +215,12 @@ export class SdChip {
             '--sd-chip-font-weight': typography.fontWeight,
             '--sd-chip-line-height': typography.lineHeight,
         };
-        return (h("span", { key: 'e1c1386f3143f4830256784853c1d931706a6beb', class: {
+        return (h("span", { key: '26f863e035272df44fec64b16ebe6c17230d3452', 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 ? (h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", role: "textbox", tabindex: this.disabled ? -1 : 0, 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() })) : ([
+                'sd-chip--editable': !this.disabled && this.isEditable,
+            }, role: this.disabled || !this.isEditable ? undefined : 'button', tabIndex: this.disabled || this.isEditing || !this.isEditable ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", role: "textbox", tabindex: this.disabled ? -1 : 0, 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() })) : ([
             h("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
             !this.disabled && (h("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
         ])));
@@ -310,6 +318,26 @@ export class SdChip {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "editable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "editable",
+                "defaultValue": "true"
+            },
             "placeholder": {
                 "type": "string",
                 "mutable": false,