@sellmate/design-system 1.0.78 → 1.1.0

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

@@ -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: '8672dad264f91b125f84e0c8312561818964cecf', class: "sd-guide", style: this.guideStyle }, h("sd-button", { key: '4f2a1b4cbb19460dadfec6dca094b289ff405bfb', 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: 'f6c4fe897426d506f73bf8bbb18b53665181c803', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'a3c77a42905e4b25ecbf1c98f7e0514b41c5100e', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '41411e0a1645f709234573dc1c2f3d60a4c90f36', 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))))))));
+            } }, h("sd-ghost-button", { key: '01c68abc21ce99aa2e1ba3a55a5e78b98dd8aa47', class: "sd-guide__popup__close", icon: "close", ariaLabel: "close", size: "sm", onSdClick: this.closeDropdown }), h("div", { key: '04d9f4d51cd05755aa6a18fcb4ba0a177fb62ad5', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'b02adf9e9e4ca2239e3b46e7cf8c5ba0cfc008a0', name: iconName, size: 24, color: popupIconColor }), h("h3", { key: '3f4324aa1959dc8abb10e84b1103106548053679', class: "sd-guide__popup__title" }, this.popupTitle || defaultLabel)), h("ul", { key: '64937c15f19ae2f91c6c9d1f430ad579b42c5592', 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

@@ -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: 'a94dfffaad91682d63a4c0f8e2428aee0f2dc909', 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: '44a55878936edbe36726b0cd607b607ee2921155', class: "sd-input__content" }, h("slot", { key: 'c3566240fc270059c4a7b4ccd7907a27141fd57e', name: "prefix" }), h("input", { key: '0df6f4eea75f1d5c0ed174902eb2c072dc81c23f', 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: '685051959a063e6c2465a01aaa77b0f84c4bb570', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && !this.readonly && (h("sd-ghost-button", { key: '382c86fe50a702b84a7dbc82b2e19d9e534af36a', 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: '2ae4ddc84bc8969ff4939d224b56ca7a05ea9115', 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);
+}