@sellmate/design-system 1.10.0 → 1.12.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const tab = {
 	main: {
@@ -54,9 +54,15 @@ const tab = {
 		border: {
 			width: "1"
 		},
-		gap: "24",
+		gap: {
+			horizontal: "24",
+			vertical: "16"
+		},
 		content: {
 			gap: "4"
+		},
+		item: {
+			height: "20"
 		}
 	}
 };
@@ -95,9 +101,11 @@ const TAB_MAIN_TYPOGRAPHY = {
     default: tabTokens.tab.main.default.typography,
 };
 const TAB_SUB_LAYOUT = {
-    gap: Number(tabTokens.tab.sub.gap),
+    gapHorizontal: Number(tabTokens.tab.sub.gap.horizontal),
+    gapVertical: Number(tabTokens.tab.sub.gap.vertical),
     contentGap: Number(tabTokens.tab.sub.content.gap),
     borderWidth: Number(tabTokens.tab.sub.border.width),
+    itemHeight: Number(tabTokens.tab.sub.item.height),
 };
 const TAB_SUB_COLORS = {
     selected: {
@@ -113,7 +121,7 @@ const TAB_SUB_TYPOGRAPHY = {
     default: tabTokens.tab.sub.default.typography,
 };
 
-const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:var(--sd-tabs-main-container-gap);border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);font-family:var(--sd-tabs-main-font-family)}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--sd-tabs-main-gap);cursor:pointer;box-sizing:border-box;height:var(--sd-tabs-main-height);padding:0 var(--sd-tabs-main-padding-x);border:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-bottom:none;border-top-left-radius:var(--sd-tabs-main-radius);border-top-right-radius:var(--sd-tabs-main-radius);background-color:var(--sd-tabs-main-default-bg);color:var(--sd-tabs-main-default-text);font-size:var(--sd-tabs-main-font-size);line-height:var(--sd-tabs-main-line-height);font-weight:var(--sd-tabs-main-font-weight-default);transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.2s;pointer-events:none}sd-tabs .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border);color:var(--sd-tabs-main-selected-text);background-color:var(--sd-tabs-main-selected-bg)}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-main-font-weight-selected)}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:var(--sd-tabs-main-selected-border);opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:var(--sd-tabs-main-default-text);opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:var(--sd-tabs-main-font-weight-selected);visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:var(--sd-tabs-main-font-weight-default);transition:font-weight 0.2s ease}sd-tabs .sd-tabs--sub{gap:var(--sd-tabs-sub-gap);border-bottom:none;font-family:var(--sd-tabs-sub-font-family)}sd-tabs .sd-tabs--sub .sd-tabs__tab{height:auto;padding:0 0 var(--sd-tabs-sub-content-gap) 0;border:none;border-radius:0;background-color:transparent;color:var(--sd-tabs-sub-default-text);font-size:var(--sd-tabs-sub-font-size);line-height:var(--sd-tabs-sub-line-height);font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sd-tabs-sub-border-width);width:100%;background-color:var(--sd-tabs-sub-selected-line);opacity:0;transition:opacity 0.2s ease;inset:auto 0 0 0;pointer-events:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:var(--sd-tabs-sub-selected-text);background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--vertical{flex-direction:column;align-items:stretch;width:fit-content;border-bottom:none;border-right:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical .sd-tabs__tab{justify-content:flex-start;border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-right:none;border-top-right-radius:0;border-bottom-left-radius:var(--sd-tabs-main-radius)}sd-tabs .sd-tabs--vertical .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical.sd-tabs--sub{gap:16px;border-right:none}sd-tabs .sd-tabs--vertical.sd-tabs--sub .sd-tabs__tab{justify-content:center;width:100%;border:none;border-radius:0}`;
+const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:var(--sd-tabs-main-container-gap);border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);font-family:var(--sd-tabs-main-font-family)}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--sd-tabs-main-gap);cursor:pointer;box-sizing:border-box;height:var(--sd-tabs-main-height);padding:0 var(--sd-tabs-main-padding-x);border:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-bottom:none;border-top-left-radius:var(--sd-tabs-main-radius);border-top-right-radius:var(--sd-tabs-main-radius);background-color:var(--sd-tabs-main-default-bg);color:var(--sd-tabs-main-default-text);font-size:var(--sd-tabs-main-font-size);line-height:var(--sd-tabs-main-line-height);font-weight:var(--sd-tabs-main-font-weight-default);transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.2s;pointer-events:none}sd-tabs .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border);color:var(--sd-tabs-main-selected-text);background-color:var(--sd-tabs-main-selected-bg)}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-main-font-weight-selected)}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:var(--sd-tabs-main-selected-border);opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:var(--sd-tabs-main-default-text);opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:var(--sd-tabs-main-font-weight-selected);visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:var(--sd-tabs-main-font-weight-default);transition:font-weight 0.2s ease}sd-tabs .sd-tabs--sub{gap:var(--sd-tabs-sub-gap-horizontal);border-bottom:none;font-family:var(--sd-tabs-sub-font-family)}sd-tabs .sd-tabs--sub .sd-tabs__tab{height:var(--sd-tabs-sub-item-height);padding:0 0 var(--sd-tabs-sub-content-gap) 0;border:none;border-radius:0;background-color:transparent;color:var(--sd-tabs-sub-default-text);font-size:var(--sd-tabs-sub-font-size);line-height:var(--sd-tabs-sub-line-height);font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sd-tabs-sub-border-width);width:100%;background-color:var(--sd-tabs-sub-selected-line);opacity:0;transition:opacity 0.2s ease;inset:auto 0 0 0;pointer-events:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:var(--sd-tabs-sub-selected-text);background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--vertical{flex-direction:column;align-items:stretch;width:fit-content;border-bottom:none;border-right:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical .sd-tabs__tab{justify-content:flex-start;border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-right:none;border-top-right-radius:0;border-bottom-left-radius:var(--sd-tabs-main-radius)}sd-tabs .sd-tabs--vertical .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical.sd-tabs--sub{gap:var(--sd-tabs-sub-gap-vertical);border-right:none}sd-tabs .sd-tabs--vertical.sd-tabs--sub .sd-tabs__tab{justify-content:center;width:100%;border:none;border-radius:0}`;
 
 const SdTabs = class {
     constructor(hostRef) {
@@ -175,7 +183,9 @@ const SdTabs = class {
             '--sd-tabs-main-line-height': `${TAB_MAIN_TYPOGRAPHY.default.lineHeight}px`,
             '--sd-tabs-main-font-weight-default': TAB_MAIN_TYPOGRAPHY.default.fontWeight,
             '--sd-tabs-main-font-weight-selected': TAB_MAIN_TYPOGRAPHY.selected.fontWeight,
-            '--sd-tabs-sub-gap': `${TAB_SUB_LAYOUT.gap}px`,
+            '--sd-tabs-sub-gap-horizontal': `${TAB_SUB_LAYOUT.gapHorizontal}px`,
+            '--sd-tabs-sub-gap-vertical': `${TAB_SUB_LAYOUT.gapVertical}px`,
+            '--sd-tabs-sub-item-height': `${TAB_SUB_LAYOUT.itemHeight}px`,
             '--sd-tabs-sub-content-gap': `${TAB_SUB_LAYOUT.contentGap}px`,
             '--sd-tabs-sub-border-width': `${TAB_SUB_LAYOUT.borderWidth}px`,
             '--sd-tabs-sub-selected-text': TAB_SUB_COLORS.selected.text,
@@ -189,7 +199,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: '277188138dd50992b468b35f723cc3f852ad38c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '1c670c50ff7f5489a77043bc030fe3a65eb894ab', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-D3yCWQNg.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.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/esm/sd-text-link.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const textLink = {
 	sm: {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const toast = {
 	icon: "16",

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const toggle = {
 	height: "28",

package/dist/esm/{tooltipArrow-DrrY_fPj.js → tooltipArrow-CUCfrch1.js}

@@ -1,4 +1,4 @@
-import { h } from './index-BpO2YWvq.js';
+import { h } from './index-D3yCWQNg.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, 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/types/components/sd-tabs/sd-tabs.config.d.ts

@@ -47,9 +47,11 @@ export declare const TAB_MAIN_TYPOGRAPHY: {
     };
 };
 export declare const TAB_SUB_LAYOUT: {
-    gap: number;
+    gapHorizontal: number;
+    gapVertical: number;
     contentGap: number;
     borderWidth: number;
+    itemHeight: number;
 };
 export declare const TAB_SUB_COLORS: {
     selected: {

package/dist/types/components/sd-tooltip/sd-tooltip.d.ts

@@ -14,6 +14,7 @@ export declare class SdTooltip {
     ariaLabel: string;
     disabled: boolean;
     type: ButtonType;
+    useClose: boolean;
     sdClass?: string;
     showTooltip: boolean;
     slotContentHTML: string;
@@ -22,12 +23,16 @@ export declare class SdTooltip {
     private hideTimeout?;
     private closeTimeout?;
     private static readonly CLOSE_ANIM_MS;
-    private show;
-    private hide;
+    private openTooltip;
+    private closeTooltip;
     private startHideTimer;
     private cancelHideTimer;
     private get tooltipOffset();
     private handleClose;
+    /** 툴팁을 표시합니다. */
+    show(): Promise<void>;
+    /** 툴팁을 숨깁니다. */
+    hide(): Promise<void>;
     componentWillLoad(): void;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -1983,6 +1983,10 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * 툴팁을 숨깁니다.
+         */
+        "hide": () => Promise<void>;
         /**
           * @default 'helpOutline'
          */
@@ -2008,6 +2012,10 @@ export namespace Components {
           * @default ''
          */
         "sdClass"?: string;
+        /**
+          * 툴팁을 표시합니다.
+         */
+        "show": () => Promise<void>;
         /**
           * @default 'default'
          */
@@ -2020,6 +2028,10 @@ export namespace Components {
           * @default 'button'
          */
         "type": ButtonType;
+        /**
+          * @default false
+         */
+        "useClose": boolean;
     }
     interface SdTr {
         "bumpSpansVersion": () => Promise<void>;
@@ -5109,6 +5121,10 @@ declare namespace LocalJSX {
           * @default 'button'
          */
         "type"?: ButtonType;
+        /**
+          * @default false
+         */
+        "useClose"?: boolean;
     }
     interface SdTr {
         "columns"?: SdTableColumn[];
@@ -5655,6 +5671,7 @@ declare namespace LocalJSX {
         "ariaLabel": string;
         "disabled": boolean;
         "type": ButtonType;
+        "useClose": boolean;
         "sdClass": string;
     }
     interface SdTrAttributes {