@sellmate/design-system 1.0.78 → 1.2.0

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: '8aa9962dd66af45cbb9f7a16e087b8e5553692b5', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: 'fe47461827e9ded9a055134869744b9ae57be7bd', class: "sd-action-modal__header" }, h("h2", { key: '911619c8669b1ea109bdc35aa8c6850eade4c49e', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'af2959f85fbedaa0f2f04d3c0bfb110338ab7c30', class: "sd-action-modal__header-sub" }, h("slot", { key: '21801f18cce8eb0fec750ed4dbbe7eb78b6bba89', name: "header-sub-title" })), h("sd-ghost-button", { key: '6b3cbb9f3bc8566bde5a3245384bab03b71ba41f', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '0fb3e066792e018282644123978bb395a56cdf66', class: "sd-action-modal__body" }, h("slot", { key: 'ba8436ff647e422602b92ba982145e4db9366b1e', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '72a21271d7f9301d3bb4e6beb8f66b33b85554e2', class: "sd-action-modal__footer" }, h("div", { key: 'b53076fddc6a11bd64ff27bdf63577cc6f22c4bf', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'bdea9bd98cd8e5a3f0fec66c7d1424b86c7995d5', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'c2a222662a5f06dfc18928059e68837ddb0b5e95', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '278f81cf1f4ae0ca65ac6187b7fb31e4f12002f6', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '7d110c9a1633f0db63c3d605f4422b90b9eb1a5c', class: "sd-action-modal__header" }, h("h2", { key: 'd81100f64dec3a483d8f40b0be5069182de892c1', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'c90c38a33877c85837316d63aadfab5f4bee73dc', class: "sd-action-modal__header-sub" }, h("slot", { key: '98ea6a6f21d1596fa22fb7a9b37bb1169dcc6b16', name: "header-sub-title" })), h("sd-ghost-button", { key: 'dd3429279996c79dec50aef0d77cfa21f4b0392b', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'c8621876c083c1026ddbecef875b4308ce85835e', class: "sd-action-modal__body" }, h("slot", { key: 'bcf70a5bf4af9afdb421894a4cb2abeea0e277e9', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'bc783b531cc045c360680326f826cda3ccc1bd67', class: "sd-action-modal__footer" }, h("div", { key: '20d6c7708bc3218b038c5cb4faddcc6fc58acee7', class: "sd-action-modal__footer-sub" }, h("slot", { key: '08703135da34bac499de135ed5b8e85eeb0fbc3a', name: "bottom-sub-content" })), h("sd-button", { key: 'f384e5914a78fdfcfdd0bd3ad89f7bcf20c5f8d2', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {
@@ -78,14 +78,14 @@ export class SdActionModal {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonV2Props",
-                    "resolved": "ButtonV2Props | undefined",
+                    "original": "ButtonProps",
+                    "resolved": "SdButton | undefined",
                     "references": {
-                        "ButtonV2Props": {
+                        "ButtonProps": {
                             "location": "import",
-                            "path": "../sd-button-v2/sd-button-v2.config",
-                            "id": "src/components/sd-button-v2/sd-button-v2.config.ts::ButtonV2Props",
-                            "referenceLocation": "ButtonV2Props"
+                            "path": "../sd-button/sd-button.config",
+                            "id": "src/components/sd-button/sd-button.config.ts::ButtonProps",
+                            "referenceLocation": "ButtonProps"
                         }
                     }
                 },

package/dist/collection/components/sd-badge/sd-badge.config.js

@@ -1,5 +1,14 @@
 import badgeTokens from "../../tokens/generated/component.badge.json";
-export const BADGE_COLORS = ['red', 'orange', 'yellow', 'green', 'blue', 'darkblue', 'indigo', 'grey'];
+export const BADGE_COLORS = [
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'blue',
+    'darkblue',
+    'indigo',
+    'grey',
+];
 export const BADGE_COLOR_MAP = {
     red: badgeTokens.badge.red,
     orange: badgeTokens.badge.orange,

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

@@ -2,10 +2,9 @@ import { h } from "@stencil/core";
 import { BADGE_COLOR_MAP } from "./sd-badge.config";
 export class SdBadge {
     color = 'blue';
-    label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: '3737fa6c3023e7adaaf3ae4086efe6d9acadcb67', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'f13d60974520124abeb4fcd49fed638002674267', class: "sd-badge__dot" }), h("div", { key: '29c528444f3e4e4b41315586f7d31e2e828400df', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: 'aba37986d6beea38fb1c5476f5187359ac2ebf0c', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'dd80e8d18c79eda021baf7a7f233222c9c2aa717', class: "sd-badge__dot" })));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {
@@ -46,26 +45,6 @@ export class SdBadge {
                 "reflect": false,
                 "attribute": "color",
                 "defaultValue": "'blue'"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
             }
         };
     }

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

@@ -1,6 +1,6 @@
 import { h, } from "@stencil/core";
 import { nanoid } from "nanoid/non-secure";
-import { BARCODE_INPUT_SIZE_MAP, BARCODE_INPUT_COLORS, } from "./sd-barcode-input.config";
+import { BARCODE_INPUT_COLORS, BARCODE_INPUT_SIZE_MAP, } from "./sd-barcode-input.config";
 export class SdBarcodeInput {
     host;
     value = null;
@@ -61,7 +61,7 @@ export class SdBarcodeInput {
         this.formField?.sdFocus();
     }
     componentWillLoad() {
-        if (this.value) {
+        if (this.value !== undefined && this.value !== '') {
             this.internalValue = this.value;
         }
     }
@@ -102,7 +102,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: '359bac03c40af3bfc067957220124c00d0f542a1', 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: '0512c6c4ba9f778c65d6aaf9fd441e66d3e09cf7', class: "sd-barcode-input__content" }, h("slot", { key: '47f7ff7b11b0f10a6f6efce02473c63a02ab9129', name: "prefix" }), h("input", { key: '3f9150a1f188339a9d119475070eb53bca76b61a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'e193c4921de2cd71962841745e163620b3eac436', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '4ca22273d2ef5c79d439c9469bf8dbef5439e685', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '206beaac9acf7bf3e787b98c1e9bda602f1aa1d2', 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: 'ab14cdc3e65faa72ce7c549234e40ca54f441c7d', class: "sd-barcode-input__content" }, h("slot", { key: '7568acdee85fa0ae7440d7db65fd414fb1c27d1c', name: "prefix" }), h("input", { key: '388b007eb7d830083e75e6b3016c412a6922bb1a', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder ?? '입력해 주세요.', disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '8e8d4feee62108904eb766b1917ed1e20cacc83b', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'a9b158ebcdcb31009b13db624fb8c74d6252e20d', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
@@ -588,7 +588,7 @@ export class SdBarcodeInput {
                 "mutable": false,
                 "complexType": {
                     "original": "SdTooltipProps | null",
-                    "resolved": "SdTooltipProps | null",
+                    "resolved": "SdTooltip | null",
                     "references": {
                         "SdTooltipProps": {
                             "location": "import",

package/dist/collection/components/{sd-button-v2/sd-button-v2.config.js → sd-button/sd-button.config.js}

@@ -163,5 +163,5 @@ export const PRESET_BORDER_COLORS = {
 export const DISABLED_TEXT = buttonTokens.button.text.disabled;
 export const DISABLED_ICON = buttonTokens.button.icon.disabled;
 const SIZE_SUFFIX_PATTERN = /_(xs|sm|md|lg)$/;
-export const isButtonV2Name = (value) => value in BUTTON_CONFIG;
+export const isButtonName = (value) => value in BUTTON_CONFIG;
 export const getPresetName = (value) => value.replace(SIZE_SUFFIX_PATTERN, '');

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

@@ -5,7 +5,7 @@ sd-button {
 }
 
 .sd-button {
-  --sd-button-height: 34px;
+  --sd-button-height: 36px;
   --sd-button-padding-x: 20px;
   --sd-button-gap: 8px;
   --sd-button-font-family: inherit;
@@ -14,27 +14,40 @@ sd-button {
   --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;
+  --sd-button-bg: #025497;
+  --sd-button-bg-hover: #004177;
+  --sd-button-border: transparent;
+  --sd-button-content: #FFFFFF;
+  --sd-button-current-content: var(--sd-button-content);
+  --sd-button-current-icon: var(--sd-button-content);
   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);
+  min-width: var(--sd-button-min-width, auto);
+  padding: 0 var(--sd-button-padding-x);
+  border: var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-border);
+  border-radius: var(--sd-button-button-radius-sm, 4px);
+  background: var(--sd-button-bg);
+  color: var(--sd-button-current-content);
+  cursor: pointer;
+  box-sizing: border-box;
   font-family: var(--sd-button-font-family);
   font-size: var(--sd-button-font-size);
   font-weight: var(--sd-button-font-weight);
+  line-height: 1;
   text-decoration: var(--sd-button-text-decoration);
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.sd-button:hover:not(.sd-button--disabled) {
+  background: var(--sd-button-bg-hover);
+}
+.sd-button:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 2px var(--sd-button-accent);
 }
 .sd-button--xs {
   --sd-button-height: var(--sd-button-button-xs-height, 24px);
@@ -44,9 +57,8 @@ sd-button {
   --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-label-min-width: var(--sd-button-label-xs-min-width, 36px);
   --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);
@@ -56,21 +68,20 @@ sd-button {
   --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-label-min-width: var(--sd-button-label-sm-min-width, 70px);
   --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-height: var(--sd-button-button-md-height, 36px);
   --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-label-min-width: var(--sd-button-label-md-min-width, 100px);
   --sd-button-icon-only-size: var(--sd-button-button-icon-only-md-width, var(--sd-button-height));
-  line-height: 26px;
+  border-radius: var(--sd-button-button-radius-md, 6px);
 }
 .sd-button--lg {
   --sd-button-height: var(--sd-button-button-lg-height, 62px);
@@ -80,92 +91,35 @@ sd-button {
   --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-label-min-width: var(--sd-button-label-lg-min-width, 120px);
   --sd-button-icon-only-size: var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));
-  line-height: 30px;
+  border-radius: var(--sd-button-button-radius-md, 6px);
 }
 .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));
+  padding: 0;
 }
-.sd-button--no-hover:hover::before {
-  opacity: 0 !important;
+.sd-button--icon-only .sd-button__content {
+  gap: 0;
+}
+.sd-button--disabled {
+  border-color: var(--sd-button-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-button-bg-disabled, #E1E1E1);
+  --sd-button-current-content: var(--sd-button-button-text-disabled, #888888);
+  --sd-button-current-icon: var(--sd-button-button-icon-disabled, #BBBBBB);
+  cursor: not-allowed;
 }
 .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-button .sd-button__label {
+  font: inherit;
 }