@sellmate/design-system 1.0.78 → 1.2.0

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -49,7 +49,7 @@ export class SdFloatingPopover {
         }
     }
     disconnectedCallback() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.unobserveParent();
         this.wrapper?.remove();
@@ -77,19 +77,19 @@ export class SdFloatingPopover {
     }
     // 위치 갱신 (scroll / resize)
     updatePosition() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.rafId = requestAnimationFrame(() => {
             if (!this.parentRef || !this.wrapper)
                 return;
             const rect = this.parentRef.getBoundingClientRect();
-            if (!rect.width && !rect.height)
+            if (rect.width === 0 && rect.height === 0)
                 return; // 요소가 보이지 않는 경우
-            const [offsetX, offsetY] = this.offset;
+            const [offsetX, offsetY] = this.offset ?? [0, 0];
             const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
             let top = 0;
             let left = 0;
-            switch (this.placement) {
+            switch (this.placement ?? 'bottom') {
                 case 'top':
                     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
                     left =
@@ -153,7 +153,7 @@ export class SdFloatingPopover {
         }
     }
     render() {
-        return h("slot", { key: '2383aafb9b01881f06e4fc97c5903c19453b8b4c' });
+        return h("slot", { key: 'b70d70c2ed9d18a191c939b84d5728eb1c450fd0' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -13,15 +13,15 @@ export class SdForm {
             if (elA === elB)
                 return 0;
             const position = elA.compareDocumentPosition(elB);
-            if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+            if ((position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0)
                 return -1;
-            if (position & Node.DOCUMENT_POSITION_PRECEDING)
+            if ((position & Node.DOCUMENT_POSITION_PRECEDING) !== 0)
                 return 1;
             return 0;
         });
     }
     async sdRegisterField(field) {
-        if (!field.name) {
+        if (field.name === '') {
             console.warn('[sd-form] field.name is required');
             return;
         }
@@ -70,7 +70,7 @@ export class SdForm {
         this.sdSubmit.emit();
     }
     render() {
-        return (h("form", { key: 'c3fafb4169bddbd6911914ebc694a977fa11b511', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '5be1d23c35c052fdf5d8fb961fa931074eb59ee6' })));
+        return (h("form", { key: '197851b7d0ac6af39be67a2b5d2846370cc3ed39', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: '33adfc4e9d40aa48b22755a98429ab8e0a32792f' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {

package/dist/collection/components/sd-ghost-button/sd-ghost-button.js

@@ -24,7 +24,7 @@ export class SdGhostButton {
         this.warnIfMissingAriaLabel();
     }
     warnIfMissingAriaLabel() {
-        const missing = !this.ariaLabel.trim();
+        const missing = (this.ariaLabel ?? '').trim() === '';
         if (!missing) {
             this.hasWarnedMissingAriaLabel = false;
             return;
@@ -35,21 +35,23 @@ export class SdGhostButton {
         this.hasWarnedMissingAriaLabel = true;
     }
     render() {
-        const sizeConfig = GHOST_BUTTON_SIZES[this.size];
+        const size = this.size ?? 'sm';
+        const intent = this.intent ?? 'default';
+        const sizeConfig = GHOST_BUTTON_SIZES[size] ?? GHOST_BUTTON_SIZES.sm;
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
-        const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '57793e0911fc49c62ab627bd7234caf9c0a04097', class: {
+            ? GHOST_BUTTON_DISABLED_COLORS[intent]
+            : GHOST_BUTTON_CONTENT_COLORS[intent];
+        const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
+        return (h("button", { key: '789d7ad03fd9fd3164bd76b4490c06d1a2ed5ca0', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
-                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: 'cf81a34495eacad4052ad7bbd5cba837b905610b', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '0cac7bcc4b6ad28d88c9ab4bc30e59dd92f45992', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -69,7 +71,7 @@ export class SdGhostButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",

package/dist/collection/components/sd-guide/sd-guide.css

@@ -1,176 +1,4 @@
 @charset "UTF-8";
-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;
-}
-
 sd-guide {
   display: inline-flex;
   align-items: center;
@@ -195,6 +23,8 @@ sd-guide {
   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;
@@ -207,8 +37,12 @@ sd-guide {
   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;
@@ -219,10 +53,12 @@ sd-guide {
 .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 {

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

@@ -20,7 +20,7 @@ export class SdGuide {
     guideRef;
     handleClickGuide = () => {
         if (this.type === 'notion') {
-            if (this.url) {
+            if (this.url !== '') {
                 window.open(this.url, '_blank', 'noopener,noreferrer');
             }
             return;
@@ -47,6 +47,9 @@ export class SdGuide {
             '--sd-guide-button-bg-notion': button.bgNotion,
             '--sd-guide-button-text-default': button.textDefault,
             '--sd-guide-button-text-active': button.textActive,
+            '--sd-guide-button-icon-color-default': button.iconColorDefault,
+            '--sd-guide-button-icon-color-active': button.iconColorActive,
+            '--sd-guide-button-icon-color-notion': button.iconColorNotion,
             '--sd-guide-contents-padding-x': contents.paddingX,
             '--sd-guide-contents-padding-y': contents.paddingY,
             '--sd-guide-contents-gap': contents.gap,
@@ -64,20 +67,19 @@ export class SdGuide {
         };
     }
     render() {
-        const { button, contents } = GUIDE_CONFIG;
+        const { contents } = GUIDE_CONFIG;
         const isActive = this.popupShow;
         const isNotion = (this.type ?? 'tip') === 'notion';
         const defaultLabel = DEFAULT_LABEL_BY_TYPE[this.type ?? 'tip'];
         const iconName = ICON_BY_TYPE[this.type ?? 'tip'];
-        const buttonIconDefault = isNotion ? button.iconColorNotion : button.iconColorDefault;
         const popupIconColor = isNotion ? contents.iconColorNotion : contents.iconColor;
         const buttonClasses = ['sd-guide__button', `sd-guide__button--type-${this.type ?? 'tip'}`];
         if (isActive)
             buttonClasses.push('sd-guide__button--active');
-        return (h("div", { key: '4b9aa8bafd13828a4ec29d726f7276fab3042f2d', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: 'e3a17c594d111e95d0cb42dd8315174ccf4dd908', ref: el => (this.guideRef = el), class: buttonClasses.join(' '), variant: isActive ? 'primary' : 'outline', label: this.label || defaultLabel, size: "sm", icon: iconName, iconColor: isActive ? button.iconColorActive : buttonIconDefault, iconSize: button.iconSize, noHover: isActive, onSdClick: this.handleClickGuide }), this.popupShow && (h("sd-portal", { key: 'b57b09779ec23220eb466f710d55e678c913fe24', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'e62ca3a49a4976861a3e485166c8376a71286aba', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '837625b5ab61bd9383cf5329bea66ceb97ef3bac', class: "sd-guide__popup", style: {
+        return (h("div", { key: '0003572d8025680df033b2619ad11d99ccc25a35', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '01e15b072764f4244778c727445887326792ea45', 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 && (h("sd-portal", { key: 'd7fbe96ae73c3b35ce8ca673d19924b8b7503aae', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'e87cec81959c4c84a33c4c50fd40796d12ff7f4d', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '94499ea9e42b93fcec490a7ab9d7d9cccc7c1021', class: "sd-guide__popup", style: {
                 ...this.guideStyle,
-                width: this.popupWidth ? this.popupWidth + 'px' : '426px',
-            } }, h("sd-ghost-button", { key: '0e3057af64b47e20234269c0e2bf07664b8b3b13', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '544e3508d232229b4d1edd82fdefa58457cc595a', class: "sd-guide__popup__header" }, h("sd-icon", { key: '234fb04df972a50fa8deb1cacc6e34fab678d27b', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '454d5ee4cdfc2a343d64e79dc642a2aee07ed448', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '875d5f5587808e5189e77ca02e55e8d7be1125da', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+                width: this.popupWidth != null ? this.popupWidth + 'px' : '426px',
+            } }, h("sd-ghost-button", { key: '712dc57cd85bd6929a2a1ef8221d29f46ecca686', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: 'd53aadc5d766fde09a6463c7e114030c37617545', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'dcb1fef4b2024f2b4584dc10c2dc54b28a0ce752', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '00860dda925f2d9670a7f9e261241f3698dd513e', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '8676741e6998ed10ba39148cfff1f101fda8daa3', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { Icons } from "../assets/index";
 import { resolveColor } from "../../utils/color";
+import { Icons } from "../assets/index";
 export class SdIcon {
     /** 아이콘명 */
     name;
@@ -15,7 +15,7 @@ export class SdIcon {
     iconStyle = {};
     getIconClasses() {
         const classes = ['sd-icon'];
-        if (this.rotate) {
+        if (this.rotate !== undefined && this.rotate !== 0) {
             classes.push(`sd-icon--rotate-${this.rotate}`);
         }
         return classes.join(' ');
@@ -48,7 +48,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -149,7 +149,7 @@ export class SdIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "StyleProps",
-                    "resolved": "{ [key: string]: any; }",
+                    "resolved": "{ [key: string]: string | undefined; }",
                     "references": {
                         "StyleProps": {
                             "location": "global",

package/dist/collection/components/sd-input/sd-input.css

@@ -64,7 +64,7 @@ sd-input .sd-input__content .sd-input__native[disabled] {
   color: var(--sd-input-disabled-color);
 }
 sd-input .sd-input__content .sd-input__native[readonly] {
-  color: var(--sd-input-disabled-color);
+  color: var(--sd-system-color-field-text-read-only);
 }
 sd-input .sd-input__content .sd-input__native::placeholder {
   color: var(--sd-input-placeholder-color);
@@ -74,7 +74,9 @@ sd-input .sd-input__content .sd-input__password-icon {
   flex-shrink: 0;
 }
 sd-input .sd-input__content .sd-input__native[disabled] ~ .sd-input__clear-icon,
-sd-input .sd-input__content .sd-input__native[disabled] ~ .sd-input__password-icon {
+sd-input .sd-input__content .sd-input__native[disabled] ~ .sd-input__password-icon,
+sd-input .sd-input__content .sd-input__native[readonly] ~ .sd-input__clear-icon,
+sd-input .sd-input__content .sd-input__native[readonly] ~ .sd-input__password-icon {
   cursor: not-allowed;
   pointer-events: none;
 }

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

@@ -69,7 +69,7 @@ export class SdInput {
         this.formField?.sdFocus();
     }
     componentWillLoad() {
-        if (this.value) {
+        if (this.value != null && this.value !== '') {
             this.internalValue = this.value;
         }
     }
@@ -112,13 +112,13 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: 'ff139feaafdaa57e012dc559ab1a0db26dfd97b0', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, h("label", { key: '188f24de316b14315fa0bdf312c58140e757cfa3', class: "sd-input__content" }, h("slot", { key: '35d2213601e3c3508b7392096719d7841aebc6bb', name: "prefix" }), h("input", { key: '0148de670febb2bc02a95a3c6c4c1a6cee523626', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '4a8bd55a4cfd25f482b1fcabb84f8ffffbbc8072', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: '5c11a19971dceba378a4ea77f3f40d7b3d928214', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
-                if (this.disabled)
+        return (h("sd-field", { key: 'a81aefc3060587c77acf9f6de9f26f7f421b4c91', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, readonly: this.readonly, focused: this.focused, hovered: this.hovered, status: this.status, 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 }, h("label", { key: '7486a081cceed565d2624125e74cbde4a97a4d5c', class: "sd-input__content" }, h("slot", { key: 'cf65ff444baddbf20004ae3ef80c5a54564d7d6f', name: "prefix" }), h("input", { key: '468d342c1cd6f60f7ad573a8c4b0acd4d7424e13', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : (this.type ?? 'text'), value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '5de289a0767297fc1952dbcb26bbe256f2f0d6c4', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '2ef30f443a82492f1cdd56f812651605b4057fa2', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+                if (this.disabled || this.readonly)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: '92cb57b65e70a499c48e73f028e30715f1b1356c', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
-                if (this.disabled)
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'a8cd4f37a0cea5512e080748310032256af9187d', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled || this.readonly, class: "sd-input__password-icon", onClick: () => {
+                if (this.disabled || this.readonly)
                     return;
                 this.passwordVisible = !this.passwordVisible;
             } })))));
@@ -738,7 +738,7 @@ export class SdInput {
                 "mutable": false,
                 "complexType": {
                     "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",

package/dist/collection/components/sd-key-value-table/sd-key-value-table.config.js

@@ -0,0 +1,36 @@
+import systemTokens from "../../tokens/generated/system.json";
+import tableTokens from "../../tokens/generated/component.table.json";
+const t = tableTokens.table;
+export const KEY_VALUE_TABLE_LAYOUT = {
+    rowHeight: Number(t.keyValue.height),
+    thWidth: 120,
+    borderRadius: Number(t.radius),
+    paddingX: Number(t.body.paddingX),
+    paddingY: Number(t.keyValue.body.padding),
+    helpIconSize: 16,
+    requiredIconSize: 12,
+    gap: Number(t.header.gap),
+    labelGap: Number(t.content.gap),
+    borderWidth: Number(t.border.width),
+    searchPaddingX: Number(t.keyValue.search.paddingX),
+};
+export const KEY_VALUE_TABLE_COLORS = {
+    border: t.border.color,
+    thBg: t.header.bg,
+    thLabel: systemTokens.color.fg.primary,
+    required: systemTokens.color.fg.accent,
+    helpIcon: systemTokens.color.fg.success,
+    tdBg: systemTokens.color.bg.frame,
+    tdText: systemTokens.color.fg.primary,
+    searchBg: t.keyValue.search.bg,
+};
+export const KEY_VALUE_TABLE_TYPOGRAPHY = {
+    labelFontFamily: t.header.typography.fontFamily,
+    labelFontSize: Number(t.header.typography.fontSize),
+    labelFontWeight: Number(t.header.typography.fontWeight),
+    labelLineHeight: Number(t.header.typography.lineHeight),
+    tdFontFamily: t.body.typography.fontFamily,
+    tdFontSize: Number(t.body.typography.fontSize),
+    tdFontWeight: Number(t.body.typography.fontWeight),
+    tdLineHeight: Number(t.body.typography.lineHeight),
+};

package/dist/collection/components/sd-key-value-table/sd-key-value-table.css

@@ -0,0 +1,119 @@
+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--use-top {
+  border-top-left-radius: 0;
+  border-top-right-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-y) 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--use-top {
+  border-top-left-radius: 0;
+  border-top-right-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);
+  padding: var(--sd-kvt-padding-y) var(--sd-kvt-padding-x);
+  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 {
+  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 {
+  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);
+}