@sellmate/design-system 0.0.56 → 1.0.0

package/dist/collection/components/sd-toggle-button/sd-toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-toggle-button.js","sourceRoot":"","sources":["../../../src/components/sd-toggle-button/sd-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAM/E,MAAM,OAAO,cAAc;IACc,KAAK,GAAY,KAAK,CAAC;IAEvD,KAAK,GAAW,EAAE,CAAC;IAEnB,QAAQ,GAAY,KAAK,CAAC;IAEjB,QAAQ,GAAY,KAAK,CAAC;IAElC,QAAQ,CAAyB;IAE1C,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEO,iBAAiB,CAAC,KAAc;QACvC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,IAAY,aAAa;QACxB,MAAM,OAAO,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAEO,YAAY,GAAG,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,8DACC,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,mBACvB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,gBAC3B,IAAI,CAAC,KAAK,IAAI,eAAe;YAExC,IAAI,CAAC,KAAK;YACX,8DAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAAI,CAC1E,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'sd-toggle-button',\n styleUrl: 'sd-toggle-button.scss',\n})\nexport class SdToggleButton {\n @Prop({ mutable: true, reflect: true }) value: boolean = false;\n\n @Prop() label: string = '';\n\n @Prop() disabled: boolean = false;\n\n @State() private isActive: boolean = false;\n\n @Event() sdChange!: EventEmitter<boolean>;\n\n componentWillLoad() {\n  this.updateActiveState(this.value);\n }\n\n componentWillRender() {\n  this.updateActiveState(this.value);\n }\n\n private updateActiveState(value: boolean) {\n  this.isActive = value;\n }\n\n private get buttonClasses(): string {\n  const classes = ['sd-toggle-button'];\n\n  if (this.isActive) {\n   classes.push('sd-toggle-button--active');\n  }\n\n  if (this.disabled) {\n   classes.push('sd-toggle-button--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  const newValue = !this.value;\n  this.value = newValue;\n  this.sdChange.emit(newValue);\n };\n\n render() {\n  return (\n   <label\n    class={this.buttonClasses}\n    role=\"button\"\n    aria-pressed={this.isActive.toString()}\n    aria-disabled={this.disabled.toString()}\n    aria-label={this.label || 'toggle button'}\n   >\n    {this.label}\n    <input style={{ display: 'none' }} type=\"checkbox\" onInput={this.handleChange} />\n   </label>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-toggle-button.js","sourceRoot":"","sources":["../../../src/components/sd-toggle-button/sd-toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAM/E,MAAM,OAAO,cAAc;IACc,KAAK,GAAY,KAAK,CAAC;IAEvD,KAAK,GAAW,EAAE,CAAC;IAEnB,QAAQ,GAAY,KAAK,CAAC;IAEjB,QAAQ,GAAY,KAAK,CAAC;IAET,MAAM,CAAyB;IAEjE,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEO,iBAAiB,CAAC,KAAc;QACvC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,IAAY,aAAa;QACxB,MAAM,OAAO,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,CAAC;IAEO,YAAY,GAAG,GAAG,EAAE;QAC3B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM;QACL,OAAO,CACN,8DACC,KAAK,EAAE,IAAI,CAAC,aAAa,gBAIb,IAAI,CAAC,KAAK,IAAI,eAAe;YAExC,IAAI,CAAC,KAAK;YACX,8DAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAAI,CAC1E,CACR,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n tag: 'sd-toggle-button',\n styleUrl: 'sd-toggle-button.scss',\n})\nexport class SdToggleButton {\n @Prop({ mutable: true, reflect: true }) value: boolean = false;\n\n @Prop() label: string = '';\n\n @Prop() disabled: boolean = false;\n\n @State() private isActive: boolean = false;\n\n @Event({ eventName: 'sdUpdate' }) change!: EventEmitter<boolean>;\n\n componentWillLoad() {\n  this.updateActiveState(this.value);\n }\n\n componentWillRender() {\n  this.updateActiveState(this.value);\n }\n\n private updateActiveState(value: boolean) {\n  this.isActive = value;\n }\n\n private get buttonClasses(): string {\n  const classes = ['sd-toggle-button'];\n\n  if (this.isActive) {\n   classes.push('sd-toggle-button--active');\n  }\n\n  if (this.disabled) {\n   classes.push('sd-toggle-button--disabled');\n  }\n\n  return classes.join(' ');\n }\n\n private handleChange = () => {\n  if (this.disabled) return;\n\n  const newValue = !this.value;\n  this.value = newValue;\n  this.change.emit(newValue);\n };\n\n render() {\n  return (\n   <label\n    class={this.buttonClasses}\n    // role=\"button\"\n    // aria-pressed={this.isActive.toString()}\n    // aria-disabled={this.disabled.toString()}\n    aria-label={this.label || 'toggle button'}\n   >\n    {this.label}\n    <input style={{ display: 'none' }} type=\"checkbox\" onInput={this.handleChange} />\n   </label>\n  );\n }\n}\n"]}

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

@@ -1,5 +1,9 @@
-sd-tooltip [slot=content] {
-  display: none;
+sd-tooltip {
+  visibility: hidden !important;
+  display: inline-flex;
+}
+sd-tooltip.visible {
+  visibility: visible !important;
 }
 sd-tooltip .sd-tooltip {
   position: relative;
@@ -7,67 +11,4 @@ sd-tooltip .sd-tooltip {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-}
-
-.sd-tooltip-menu {
-  width: fit-content;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-size: 12px;
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  align-items: start;
-  justify-content: center;
-  gap: 12px;
-}
-.sd-tooltip-menu--with-close {
-  padding-right: 12px !important;
-}
-.sd-tooltip-menu__arrow {
-  position: absolute;
-  display: flex;
-  width: 9.6px;
-  height: 7.2px;
-}
-.sd-tooltip-menu__arrow svg {
-  width: 100%;
-  height: 100%;
-}
-.sd-tooltip-menu__arrow--top {
-  bottom: -7.2px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.sd-tooltip-menu__arrow--bottom {
-  top: -7.2px;
-  left: 50%;
-  transform: translateX(-50%) rotate(180deg);
-}
-.sd-tooltip-menu__arrow--left {
-  right: -7.2px;
-  top: 50%;
-  transform: translateY(-50%) rotate(-90deg);
-}
-.sd-tooltip-menu__arrow--right {
-  left: -7.2px;
-  top: 50%;
-  transform: translateY(-50%) rotate(90deg);
-}
-.sd-tooltip-menu__content {
-  line-height: 20px;
-  font-weight: 500;
-}
-.sd-tooltip-menu__content p {
-  margin: 0;
-}
-.sd-tooltip-menu__close-button {
-  padding-top: 4px;
-  display: flex;
-}
-.sd-tooltip-menu__close-button button {
-  padding: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
 }

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

@@ -14,25 +14,16 @@ export class SdTooltip {
     noHover = true;
     useClose = false;
     showTooltip = false;
-    slotContent = null;
-    static COLOR_OF_TYPE = {
-        default: { background: 'oceanblue_85', text: 'white' },
-        caution: { background: 'red_20', text: 'red_70' },
-        notice: { background: 'orange_10', text: 'orange_65' },
-        accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },
-    };
+    slotContentHTML = '';
     buttonEl;
     handleClose = () => {
         this.showTooltip = false;
     };
-    // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에
-    // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)
-    // 따라서 slot내용을 받은 후에 복제하여 state에 저장
     componentWillLoad() {
-        const contentEl = this.el.querySelector('[slot="content"]');
-        if (contentEl) {
-            this.slotContent = contentEl.cloneNode(true);
-        }
+        this.slotContentHTML = this.el.innerHTML;
+        this.el.replaceChildren();
+        // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌
+        this.el.classList.toggle('visible', true);
     }
     render() {
         const handleTrigger = this.trigger === 'hover'
@@ -43,20 +34,12 @@ export class SdTooltip {
             : {
                 onClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '1016ad941100e902068b5a7d7773a2dbf7ab0667' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-tooltip-portal", { key: '8370b55d3bafa7a5ca429ee17c7555cfdb9e51a2', parentRef: this.buttonEl, onSdClose: () => this.handleClose(), placement: this.placement }, h("div", { key: '94a8d13f88050792b3e307901c2545995d92fdaf', class: {
-                'sd-tooltip-menu': true,
-                [`sd-tooltip-menu--${this.type}`]: true,
-                [`sd-tooltip-menu--${this.placement}`]: true,
-                'sd-tooltip-menu--with-close': this.useClose,
-                [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-                [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,
-            } }, h("i", { key: 'b13f215dc7f51af86e7748a0ac565f62cbd936ef', class: `sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'a043ccc525e18baed8c9b4d5cdd7651c4600b4e4', class: {
-                [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,
-            } })), h("div", { key: '60e67cc4620b07153a8cef098446e0a292f08230', class: "sd-tooltip-menu__content", ref: el => {
-                if (el && this.slotContent && !el.hasChildNodes()) {
-                    el.appendChild(this.slotContent.cloneNode(true));
-                }
-            } }, !this.slotContent && h("span", { key: 'e2e2afd2e2607be01d474c9329cd15b280214cd0' }, this.el.textContent)), this.useClose && (h("div", { key: '25962f34a91f8838e32c25529cacf048b2bbcf6b', class: "sd-tooltip-menu__close-button" }, h("button", { key: '5e37a4c9bace03a0c2a26edb0125ac0f25c65784', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: () => this.handleClose() }, h("sd-icon", { key: 'ed7c97b16a507b8fad10d58f4e5a38061517b88a', name: "close", size: "12", color: "#AAAAAA" })))))))));
+        return (h(Fragment, { key: 'd0db4bd2d57b38eae1522abd96c2776d6ffdd7c7' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: 'ef5951d34aa4a0b5b831eadf464ab2c6711b9320', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: '07f7090e1de9461d1a67b092631e1c8daae1abaa', class: {
+                'sd-floating-menu': true,
+                [`sd-floating-menu--${this.type}`]: true,
+                [`sd-floating-menu--${this.placement}`]: true,
+                'sd-floating-menu--with-close': this.useClose,
+            } }, h("i", { key: '2e8a1f6d7c2159ed48819229ee41ab75237ad2c2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '8bc18f6aeb197026ead06ef02837a70f924752f5' })), h("div", { key: 'cb91d969f481e7e1cf22e4a84aed3237b7b22376', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (h("div", { key: '856bf6d63862406177c32400e3d919f5fcd1c8df', class: "sd-floating-menu__close-button" }, h("button", { key: '83e107c58f9bc7927c449a186b19e6fa4730e53f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, h("sd-icon", { key: 'dc9dc331be0c6eb3ae96150ea50515f021746260', name: "close", size: "12", color: "#AAAAAA" })))))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {
@@ -313,7 +296,7 @@ export class SdTooltip {
     static get states() {
         return {
             "showTooltip": {},
-            "slotContent": {}
+            "slotContentHTML": {}
         };
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/sd-tooltip/sd-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-tooltip.js","sourceRoot":"","sources":["../../../src/components/sd-tooltip/sd-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\n@Component({\n tag: 'sd-tooltip',\n styleUrl: 'sd-tooltip.scss',\n})\nexport class SdTooltip {\n @Element() el!: HTMLElement;\n\n @Prop() trigger: 'hover' | 'click' = 'hover';\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n @Prop() color: string = '#01BB4B';\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\n\n @Prop() icon: IconName = 'helpOutline';\n @Prop() iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop() buttonSize: ButtonSize = 'sm';\n @Prop() buttonVariant: ButtonVariant = 'primary';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showTooltip: boolean = false;\n @State() slotContent: HTMLElement | null = null;\n\n private static readonly COLOR_OF_TYPE = {\n  default: { background: 'oceanblue_85', text: 'white' },\n  caution: { background: 'red_20', text: 'red_70' },\n  notice: { background: 'orange_10', text: 'orange_65' },\n  accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },\n };\n\n private buttonEl?: HTMLStencilElement;\n\n private handleClose = () => {\n  this.showTooltip = false;\n };\n\n // 현재 tooltip popover가 조건부 렌더링이여서 초기 slot이 렌더링 되지 않은 시점에\n // 데이터 매핑에 실패 (light dom에 저장된 slot내용을 shadow dom을 찾지못해 매핑 실패)\n // 따라서 slot내용을 받은 후에 복제하여 state에 저장\n componentWillLoad() {\n  const contentEl = this.el.querySelector('[slot=\"content\"]');\n  if (contentEl) {\n   this.slotContent = contentEl.cloneNode(true) as HTMLElement;\n  }\n }\n\n render() {\n  const handleTrigger =\n   this.trigger === 'hover'\n    ? {\n       onMouseEnter: () => (this.showTooltip = true),\n       onMouseLeave: () => (this.showTooltip = false),\n      }\n    : {\n       onClick: () => (this.showTooltip = !this.showTooltip),\n      };\n\n  return (\n   <Fragment>\n    {this.label ? (\n     <sd-button\n      ref={el => (this.buttonEl = el)}\n      label={this.label}\n      icon={this.icon}\n      size={this.buttonSize}\n      color={this.color}\n      variant={this.buttonVariant}\n      class=\"sd-tooltip\"\n      {...handleTrigger}\n     ></sd-button>\n    ) : (\n     <sd-icon\n      ref={el => (this.buttonEl = el)}\n      name={this.icon}\n      size={this.iconSize}\n      color={this.color}\n      class=\"sd-tooltip\"\n      {...handleTrigger}\n     ></sd-icon>\n    )}\n\n    {this.showTooltip && (\n     <sd-tooltip-portal\n      parentRef={this.buttonEl}\n      onSdClose={() => this.handleClose()}\n      placement={this.placement}\n     >\n      <div\n       class={{\n        'sd-tooltip-menu': true,\n        [`sd-tooltip-menu--${this.type}`]: true,\n        [`sd-tooltip-menu--${this.placement}`]: true,\n        'sd-tooltip-menu--with-close': this.useClose,\n        [`bg-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\n        [`text-${SdTooltip.COLOR_OF_TYPE[this.type].text}`]: true,\n       }}\n      >\n       <i class={`sd-tooltip-menu__arrow sd-tooltip-menu__arrow--${this.placement}`}>\n        <TooltipArrow\n         class={{\n          [`text-${SdTooltip.COLOR_OF_TYPE[this.type].background}`]: true,\n         }}\n        ></TooltipArrow>\n       </i>\n\n       <div\n        class=\"sd-tooltip-menu__content\"\n        ref={el => {\n         if (el && this.slotContent && !el.hasChildNodes()) {\n          el.appendChild(this.slotContent.cloneNode(true));\n         }\n        }}\n       >\n        {!this.slotContent && <span>{this.el.textContent}</span>}\n       </div>\n\n       {this.useClose && (\n        <div class=\"sd-tooltip-menu__close-button\">\n         <button\n          type=\"button\"\n          aria-label=\"Close tooltip\"\n          title=\"Close tooltip\"\n          onClick={() => this.handleClose()}\n         >\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n         </button>\n        </div>\n       )}\n      </div>\n     </sd-tooltip-portal>\n    )}\n   </Fragment>\n  );\n }\n}\n"]}
+{"version":3,"file":"sd-tooltip.js","sourceRoot":"","sources":["../../../src/components/sd-tooltip/sd-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAG7E,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAoBtD,MAAM,OAAO,SAAS;IACV,EAAE,CAAe;IAEpB,OAAO,GAAsB,OAAO,CAAC;IACrC,SAAS,GAAwC,KAAK,CAAC;IACvD,KAAK,GAAW,SAAS,CAAC;IAC1B,IAAI,GAAgD,SAAS,CAAC;IAE9D,IAAI,GAAa,aAAa,CAAC;IAC/B,QAAQ,GAAW,EAAE,CAAC;IAEtB,KAAK,GAAW,EAAE,CAAC;IACnB,UAAU,GAAe,IAAI,CAAC;IAC9B,aAAa,GAAkB,SAAS,CAAC;IAEzC,OAAO,GAAY,IAAI,CAAC;IAExB,QAAQ,GAAY,KAAK,CAAC;IAEzB,WAAW,GAAY,KAAK,CAAC;IAC7B,eAAe,GAAW,EAAE,CAAC;IAE9B,QAAQ,CAAsB;IAE9B,WAAW,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC1B,CAAC,CAAC;IAEF,iBAAiB;QAChB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;QACzC,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC;QAC1B,gFAAgF;QAChF,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM;QACL,MAAM,aAAa,GAClB,IAAI,CAAC,OAAO,KAAK,OAAO;YACvB,CAAC,CAAC;gBACC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC7C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aAC9C;YACH,CAAC,CAAC;gBACC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;aACrD,CAAC;QAEN,OAAO,CACN,EAAC,QAAQ;YACP,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACb,iBACC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAC,YAAY,KACd,aAAa,GACL,CACb,CAAC,CAAC,CAAC,CACH,eACC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,YAAY,KACd,aAAa,GACP,CACX;YAEA,IAAI,CAAC,WAAW,IAAI,CACpB,2EACC,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACtC,SAAS,EAAE,IAAI,CAAC,SAAS;gBAEzB,4DACC,KAAK,EAAE;wBACN,kBAAkB,EAAE,IAAI;wBACxB,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;wBACxC,CAAC,qBAAqB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;wBAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;qBAC7C;oBAED,0DAAG,KAAK,EAAE,oDAAoD,IAAI,CAAC,SAAS,EAAE;wBAC7E,EAAC,YAAY,sDAAgB,CAC1B;oBAEJ,4DAAK,KAAK,EAAC,2BAA2B,EAAC,SAAS,EAAE,IAAI,CAAC,eAAe,GAAQ;oBAE7E,IAAI,CAAC,QAAQ,IAAI,CACjB,4DAAK,KAAK,EAAC,gCAAgC;wBAC1C,+DACC,IAAI,EAAC,QAAQ,gBACF,eAAe,EAC1B,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;4BAEpC,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,GAAW,CAClD,CACJ,CACN,CACI,CACc,CACrB,CACS,CACX,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\nexport interface SdTooltipProps {\n trigger?: 'hover' | 'click';\n placement?: 'top' | 'bottom' | 'left' | 'right';\n color?: string;\n type?: 'default' | 'caution' | 'notice' | 'accent';\n icon?: IconName;\n iconSize?: number;\n label?: string;\n buttonSize?: ButtonSize;\n buttonVariant?: ButtonVariant;\n noHover?: boolean;\n useClose?: boolean;\n}\n\n@Component({\n tag: 'sd-tooltip',\n styleUrl: 'sd-tooltip.scss',\n})\nexport class SdTooltip {\n @Element() el!: HTMLElement;\n\n @Prop() trigger: 'hover' | 'click' = 'hover';\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n @Prop() color: string = '#01BB4B';\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\n\n @Prop() icon: IconName = 'helpOutline';\n @Prop() iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop() buttonSize: ButtonSize = 'sm';\n @Prop() buttonVariant: ButtonVariant = 'primary';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showTooltip: boolean = false;\n @State() slotContentHTML: string = '';\n\n private buttonEl?: HTMLStencilElement;\n\n private handleClose = () => {\n  this.showTooltip = false;\n };\n\n componentWillLoad() {\n  this.slotContentHTML = this.el.innerHTML;\n  this.el.replaceChildren();\n  // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌\n  this.el.classList.toggle('visible', true);\n }\n\n render() {\n  const handleTrigger =\n   this.trigger === 'hover'\n    ? {\n       onMouseEnter: () => (this.showTooltip = true),\n       onMouseLeave: () => (this.showTooltip = false),\n      }\n    : {\n       onClick: () => (this.showTooltip = !this.showTooltip),\n      };\n\n  return (\n   <Fragment>\n    {this.label ? (\n     <sd-button\n      ref={el => (this.buttonEl = el)}\n      label={this.label}\n      icon={this.icon}\n      size={this.buttonSize}\n      color={this.color}\n      variant={this.buttonVariant}\n      class=\"sd-tooltip\"\n      {...handleTrigger}\n     ></sd-button>\n    ) : (\n     <sd-icon\n      ref={el => (this.buttonEl = el)}\n      name={this.icon}\n      size={this.iconSize}\n      color={this.color}\n      class=\"sd-tooltip\"\n      {...handleTrigger}\n     ></sd-icon>\n    )}\n\n    {this.showTooltip && (\n     <sd-floating-portal\n      parentRef={this.buttonEl}\n      onSdClose={this.handleClose.bind(this)}\n      placement={this.placement}\n     >\n      <div\n       class={{\n        'sd-floating-menu': true,\n        [`sd-floating-menu--${this.type}`]: true,\n        [`sd-floating-menu--${this.placement}`]: true,\n        'sd-floating-menu--with-close': this.useClose,\n       }}\n      >\n       <i class={`sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}`}>\n        <TooltipArrow></TooltipArrow>\n       </i>\n\n       <div class=\"sd-floating-menu__content\" innerHTML={this.slotContentHTML}></div>\n\n       {this.useClose && (\n        <div class=\"sd-floating-menu__close-button\">\n         <button\n          type=\"button\"\n          aria-label=\"Close tooltip\"\n          title=\"Close tooltip\"\n          onClick={this.handleClose.bind(this)}\n         >\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n         </button>\n        </div>\n       )}\n      </div>\n     </sd-floating-portal>\n    )}\n   </Fragment>\n  );\n }\n}\n"]}

package/dist/collection/types/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/types/select.ts"],"names":[],"mappings":"","sourcesContent":["export interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport interface SelectOptionGroup extends SelectOption {\n type: 'group' | 'subgroup' | 'item';\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdChange: {\n  value: string | number | null;\n  option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdChange: SelectOption[] | null;\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/types/select.ts"],"names":[],"mappings":"","sourcesContent":["export interface SelectOption {\n value: string | number;\n label: string;\n disabled?: boolean;\n}\n\nexport interface SelectOptionGroup extends SelectOption {\n type: 'group' | 'subgroup' | 'item';\n parent?: string;\n}\n\nexport interface SelectStyleProps {\n containerStyle?: { [key: string]: string };\n triggerStyle?: { [key: string]: string };\n dropdownStyle?: { [key: string]: string };\n optionStyle?: { [key: string]: string };\n labelStyle?: { [key: string]: string };\n}\n\nexport interface SelectEvents {\n sdChange: {\n  value: string | number | null;\n  option: SelectOption | null;\n };\n dropDownShow: { isOpen: boolean };\n}\n\nexport interface SelectMultipleEvents extends Pick<SelectEvents, 'dropDownShow' | 'dropDownShow'> {\n sdUpdate: SelectOption[] | null;\n}\n"]}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CQBrru3e.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-YLoygqPr.js';
 
 function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');

package/dist/components/p-7xekTQRB.js

@@ -0,0 +1,104 @@
+import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-YLoygqPr.js';
+import { T as TooltipArrow } from './p-BKSlQGJv.js';
+import { d as defineCustomElement$3 } from './p-CdGD6AqM.js';
+import { d as defineCustomElement$2 } from './p-CVMprLsE.js';
+import { d as defineCustomElement$1 } from './p-DnQF6htq.js';
+
+const sdTooltipCss = () => `sd-tooltip{visibility:hidden !important;display:inline-flex}sd-tooltip.visible{visibility:visible !important}sd-tooltip .sd-tooltip{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}`;
+
+const SdTooltip = /*@__PURE__*/ proxyCustomElement(class SdTooltip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    get el() { return this; }
+    trigger = 'hover';
+    placement = 'top';
+    color = '#01BB4B';
+    type = 'default';
+    icon = 'helpOutline';
+    iconSize = 12;
+    label = '';
+    buttonSize = 'sm';
+    buttonVariant = 'primary';
+    noHover = true;
+    useClose = false;
+    showTooltip = false;
+    slotContentHTML = '';
+    buttonEl;
+    handleClose = () => {
+        this.showTooltip = false;
+    };
+    componentWillLoad() {
+        this.slotContentHTML = this.el.innerHTML;
+        this.el.replaceChildren();
+        // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌
+        this.el.classList.toggle('visible', true);
+    }
+    render() {
+        const handleTrigger = this.trigger === 'hover'
+            ? {
+                onMouseEnter: () => (this.showTooltip = true),
+                onMouseLeave: () => (this.showTooltip = false),
+            }
+            : {
+                onClick: () => (this.showTooltip = !this.showTooltip),
+            };
+        return (h(Fragment, { key: 'd0db4bd2d57b38eae1522abd96c2776d6ffdd7c7' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-tooltip", ...handleTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (h("sd-floating-portal", { key: 'ef5951d34aa4a0b5b831eadf464ab2c6711b9320', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: '07f7090e1de9461d1a67b092631e1c8daae1abaa', class: {
+                'sd-floating-menu': true,
+                [`sd-floating-menu--${this.type}`]: true,
+                [`sd-floating-menu--${this.placement}`]: true,
+                'sd-floating-menu--with-close': this.useClose,
+            } }, h("i", { key: '2e8a1f6d7c2159ed48819229ee41ab75237ad2c2', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '8bc18f6aeb197026ead06ef02837a70f924752f5' })), h("div", { key: 'cb91d969f481e7e1cf22e4a84aed3237b7b22376', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }), this.useClose && (h("div", { key: '856bf6d63862406177c32400e3d919f5fcd1c8df', class: "sd-floating-menu__close-button" }, h("button", { key: '83e107c58f9bc7927c449a186b19e6fa4730e53f', type: "button", "aria-label": "Close tooltip", title: "Close tooltip", onClick: this.handleClose.bind(this) }, h("sd-icon", { key: 'dc9dc331be0c6eb3ae96150ea50515f021746260', name: "close", size: "12", color: "#AAAAAA" })))))))));
+    }
+    static get style() { return sdTooltipCss(); }
+}, [768, "sd-tooltip", {
+        "trigger": [1],
+        "placement": [1],
+        "color": [1],
+        "type": [1],
+        "icon": [1],
+        "iconSize": [2, "icon-size"],
+        "label": [1],
+        "buttonSize": [1, "button-size"],
+        "buttonVariant": [1, "button-variant"],
+        "noHover": [4, "no-hover"],
+        "useClose": [4, "use-close"],
+        "showTooltip": [32],
+        "slotContentHTML": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-tooltip", "sd-button", "sd-floating-portal", "sd-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdTooltip);
+            }
+            break;
+        case "sd-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "sd-floating-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SdTooltip as S, defineCustomElement as d };
+//# sourceMappingURL=p-7xekTQRB.js.map
+
+//# sourceMappingURL=p-7xekTQRB.js.map

package/dist/components/p-7xekTQRB.js.map

@@ -0,0 +1 @@
+{"file":"p-7xekTQRB.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-tooltip/sd-tooltip.scss?tag=sd-tooltip","src/components/sd-tooltip/sd-tooltip.tsx"],"sourcesContent":["sd-tooltip {\n visibility: hidden !important;\n display: inline-flex;\n\n &.visible {\n  visibility: visible !important;\n }\n\n .sd-tooltip {\n  position: relative;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n }\n}\n","import { Component, Element, Fragment, Prop, State, h } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ButtonSize, ButtonVariant } from '../sd-button/sd-button';\nimport { TooltipArrow } from '../assets/tooltipArrow';\n\nexport interface SdTooltipProps {\n trigger?: 'hover' | 'click';\n placement?: 'top' | 'bottom' | 'left' | 'right';\n color?: string;\n type?: 'default' | 'caution' | 'notice' | 'accent';\n icon?: IconName;\n iconSize?: number;\n label?: string;\n buttonSize?: ButtonSize;\n buttonVariant?: ButtonVariant;\n noHover?: boolean;\n useClose?: boolean;\n}\n\n@Component({\n tag: 'sd-tooltip',\n styleUrl: 'sd-tooltip.scss',\n})\nexport class SdTooltip {\n @Element() el!: HTMLElement;\n\n @Prop() trigger: 'hover' | 'click' = 'hover';\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'top';\n @Prop() color: string = '#01BB4B';\n @Prop() type: 'default' | 'caution' | 'notice' | 'accent' = 'default';\n\n @Prop() icon: IconName = 'helpOutline';\n @Prop() iconSize: number = 12;\n\n @Prop() label: string = '';\n @Prop() buttonSize: ButtonSize = 'sm';\n @Prop() buttonVariant: ButtonVariant = 'primary';\n\n @Prop() noHover: boolean = true;\n\n @Prop() useClose: boolean = false;\n\n @State() showTooltip: boolean = false;\n @State() slotContentHTML: string = '';\n\n private buttonEl?: HTMLStencilElement;\n\n private handleClose = () => {\n  this.showTooltip = false;\n };\n\n componentWillLoad() {\n  this.slotContentHTML = this.el.innerHTML;\n  this.el.replaceChildren();\n  // 깜빡이는 현상을 막기 위해 기본으로 <sd-tooltip></sd-tooltip> hidden이 된 elment를 visible로 만들어줌\n  this.el.classList.toggle('visible', true);\n }\n\n render() {\n  const handleTrigger =\n   this.trigger === 'hover'\n    ? {\n       onMouseEnter: () => (this.showTooltip = true),\n       onMouseLeave: () => (this.showTooltip = false),\n      }\n    : {\n       onClick: () => (this.showTooltip = !this.showTooltip),\n      };\n\n  return (\n   <Fragment>\n    {this.label ? (\n     <sd-button\n      ref={el => (this.buttonEl = el)}\n      label={this.label}\n      icon={this.icon}\n      size={this.buttonSize}\n      color={this.color}\n      variant={this.buttonVariant}\n      class=\"sd-tooltip\"\n      {...handleTrigger}\n     ></sd-button>\n    ) : (\n     <sd-icon\n      ref={el => (this.buttonEl = el)}\n      name={this.icon}\n      size={this.iconSize}\n      color={this.color}\n      class=\"sd-tooltip\"\n      {...handleTrigger}\n     ></sd-icon>\n    )}\n\n    {this.showTooltip && (\n     <sd-floating-portal\n      parentRef={this.buttonEl}\n      onSdClose={this.handleClose.bind(this)}\n      placement={this.placement}\n     >\n      <div\n       class={{\n        'sd-floating-menu': true,\n        [`sd-floating-menu--${this.type}`]: true,\n        [`sd-floating-menu--${this.placement}`]: true,\n        'sd-floating-menu--with-close': this.useClose,\n       }}\n      >\n       <i class={`sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}`}>\n        <TooltipArrow></TooltipArrow>\n       </i>\n\n       <div class=\"sd-floating-menu__content\" innerHTML={this.slotContentHTML}></div>\n\n       {this.useClose && (\n        <div class=\"sd-floating-menu__close-button\">\n         <button\n          type=\"button\"\n          aria-label=\"Close tooltip\"\n          title=\"Close tooltip\"\n          onClick={this.handleClose.bind(this)}\n         >\n          <sd-icon name=\"close\" size=\"12\" color=\"#AAAAAA\"></sd-icon>\n         </button>\n        </div>\n       )}\n      </div>\n     </sd-floating-portal>\n    )}\n   </Fragment>\n  );\n }\n}\n"],"version":3}

package/dist/components/{p-BDkKpeVz.js → p-BKSlQGJv.js}

@@ -1,8 +1,8 @@
-import { h } from './p-CQBrru3e.js';
+import { h } from './p-YLoygqPr.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" })));
 
 export { TooltipArrow as T };
-//# sourceMappingURL=p-BDkKpeVz.js.map
+//# sourceMappingURL=p-BKSlQGJv.js.map
 
-//# sourceMappingURL=p-BDkKpeVz.js.map
+//# sourceMappingURL=p-BKSlQGJv.js.map

package/dist/components/{p-BDkKpeVz.js.map → p-BKSlQGJv.js.map}

@@ -1 +1 @@
-{"file":"p-BDkKpeVz.js","mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3C,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAET,CACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;","names":[],"sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport const TooltipArrow = (props: SVGProps) => (\n <svg\n  width=\"16\"\n  height=\"12\"\n  viewBox=\"0 0 16 12\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <path\n   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\"\n   fill=\"currentColor\"\n  />\n </svg>\n);\n"],"version":3}
+{"file":"p-BKSlQGJv.js","mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,KAAe,MAC3C,CACC,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,KAC9B,KAAK,EAAA,EAET,CACC,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,iHAAiH,EACnH,IAAI,EAAC,cAAc,EAAA,CAClB,CACG;;;;","names":[],"sources":["src/components/assets/tooltipArrow.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\nexport const TooltipArrow = (props: SVGProps) => (\n <svg\n  width=\"16\"\n  height=\"12\"\n  viewBox=\"0 0 16 12\"\n  fill=\"none\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  {...props}\n >\n  <path\n   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\"\n   fill=\"currentColor\"\n  />\n </svg>\n);\n"],"version":3}

package/dist/components/{p-C5U6Otnl.js → p-CVMprLsE.js}

@@ -1,13 +1,14 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-CQBrru3e.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-YLoygqPr.js';
 
-const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal extends H {
+const sdFloatingPortalCss = () => `.sd-floating-menu{width:fit-content;padding:12px 20px;border-radius:4px;font-size:12px;position:relative;box-sizing:border-box;background:#07284a;color:#ffffff}.sd-floating-menu .sd-floating-menu__arrow{color:#07284a}.sd-floating-menu--default{background:#07284a;color:#ffffff}.sd-floating-menu--default .sd-floating-menu__arrow{color:#07284a}.sd-floating-menu--caution{background:#fce6e6;color:#fb4444}.sd-floating-menu--caution .sd-floating-menu__arrow{color:#fce6e6}.sd-floating-menu--notice{background:#ffead7;color:#ff6b00}.sd-floating-menu--notice .sd-floating-menu__arrow{color:#ffead7}.sd-floating-menu--accent{background:#e6f1ff;color:#0075ff}.sd-floating-menu--accent .sd-floating-menu__arrow{color:#e6f1ff}.sd-floating-menu__arrow{position:absolute;display:flex;width:9.6px;height:7.2px}.sd-floating-menu__arrow svg{width:100%;height:100%}.sd-floating-menu__arrow--top{bottom:-7.2px;left:50%;transform:translateX(-50%)}.sd-floating-menu__arrow--bottom{top:-7.2px;left:50%;transform:translateX(-50%) rotate(180deg)}.sd-floating-menu__arrow--left{right:-7.2px;top:50%;transform:translateY(-50%) rotate(-90deg)}.sd-floating-menu__arrow--right{left:-7.2px;top:50%;transform:translateY(-50%) rotate(90deg)}.sd-floating-menu__content{font-size:12px;line-height:20px}.sd-floating-menu__content .sd-floating-menu__title{font-weight:700;margin-bottom:4px}.sd-floating-menu__content .sd-floating-menu__messages{font-weight:500}.sd-floating-menu__content .sd-floating-menu__buttons{margin-top:12px;display:flex;gap:8px;align-items:center}.sd-floating-menu__content .sd-floating-menu__buttons--1{justify-content:flex-end}.sd-floating-menu__content .sd-floating-menu__buttons--2{justify-content:space-between}.sd-floating-menu__close-button{position:absolute;top:16px;right:12px;padding:0;background:none;border:none;cursor:pointer}`;
+
+const SdFloatingPopover = /*@__PURE__*/ proxyCustomElement(class SdFloatingPopover extends H {
     constructor(registerHost) {
         super();
         if (registerHost !== false) {
             this.__registerHost();
         }
-        this.__attachShadow();
-        this.sdClose = createEvent(this, "sdClose");
+        this.close = createEvent(this, "sdClose");
     }
     get el() { return this; }
     to = 'body';
@@ -16,7 +17,7 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
     zIndex = 9999;
     placement = 'bottom';
     open = false;
-    sdClose;
+    close;
     container;
     wrapper;
     rafId;
@@ -95,7 +96,7 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
             if (!rect.width && !rect.height)
                 return; // 요소가 보이지 않는 경우
             const [offsetX, offsetY] = this.offset;
-            const ARROW_SIZE = SdTooltipPortal.ARROW_SIZE;
+            const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;
             let top = 0;
             let left = 0;
             switch (this.placement) {
@@ -150,12 +151,13 @@ const SdTooltipPortal = /*@__PURE__*/ proxyCustomElement(class SdTooltipPortal e
         }
         if (this.wrapper?.contains(e.target))
             return;
-        this.sdClose.emit();
+        this.close.emit();
     }
     render() {
-        return h("slot", { key: 'f26d3228d5c0965c2303e599259a6e93307009dc' });
+        return h("slot", { key: 'f2000891d7d3bd71982f591bf953d1421f67fb5e' });
     }
-}, [769, "sd-tooltip-portal", {
+    static get style() { return sdFloatingPortalCss(); }
+}, [772, "sd-floating-portal", {
         "to": [1],
         "parentRef": [16],
         "offset": [16],
@@ -167,17 +169,17 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["sd-tooltip-portal"];
+    const components = ["sd-floating-portal"];
     components.forEach(tagName => { switch (tagName) {
-        case "sd-tooltip-portal":
+        case "sd-floating-portal":
             if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), SdTooltipPortal);
+                customElements.define(transformTag(tagName), SdFloatingPopover);
             }
             break;
     } });
 }
 
-export { SdTooltipPortal as S, defineCustomElement as d };
-//# sourceMappingURL=p-C5U6Otnl.js.map
+export { SdFloatingPopover as S, defineCustomElement as d };
+//# sourceMappingURL=p-CVMprLsE.js.map
 
-//# sourceMappingURL=p-C5U6Otnl.js.map
+//# sourceMappingURL=p-CVMprLsE.js.map

package/dist/components/p-CVMprLsE.js.map

@@ -0,0 +1 @@
+{"file":"p-CVMprLsE.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-floating-portal/sd-floating-portal.scss?tag=sd-floating-portal","src/components/sd-floating-portal/sd-floating-portal.tsx"],"sourcesContent":["@import 'variables';\n\n.sd-floating-menu {\n width: fit-content;\n padding: 12px 20px;\n border-radius: 4px;\n font-size: 12px;\n position: relative;\n box-sizing: border-box;\n background: $oceanblue_85;\n color: $white;\n\n .sd-floating-menu__arrow {\n  color: $oceanblue_85;\n }\n\n &--default {\n  background: $oceanblue_85;\n  color: $white;\n  .sd-floating-menu__arrow {\n   color: $oceanblue_85;\n  }\n }\n\n &--caution {\n  background: $red_20;\n  color: $red_70;\n  .sd-floating-menu__arrow {\n   color: $red_20;\n  }\n }\n\n &--notice {\n  background: $orange_10;\n  color: $orange_65;\n  .sd-floating-menu__arrow {\n   color: $orange_10;\n  }\n }\n\n &--accent {\n  background: $brilliantblue_20;\n  color: $brilliantblue_75;\n  .sd-floating-menu__arrow {\n   color: $brilliantblue_20;\n  }\n }\n\n &__arrow {\n  position: absolute;\n  display: flex;\n  width: 9.6px;\n  height: 7.2px;\n\n  svg {\n   width: 100%;\n   height: 100%;\n  }\n\n  &--top {\n   bottom: -7.2px;\n   left: 50%;\n   transform: translateX(-50%);\n  }\n\n  &--bottom {\n   top: -7.2px;\n   left: 50%;\n   transform: translateX(-50%) rotate(180deg);\n  }\n\n  &--left {\n   right: -7.2px;\n   top: 50%;\n   transform: translateY(-50%) rotate(-90deg);\n  }\n\n  &--right {\n   left: -7.2px;\n   top: 50%;\n   transform: translateY(-50%) rotate(90deg);\n  }\n }\n\n &__content {\n  font-size: 12px;\n  line-height: 20px;\n\n  .sd-floating-menu__title {\n   font-weight: 700;\n   margin-bottom: 4px;\n  }\n\n  .sd-floating-menu__messages {\n   font-weight: 500;\n  }\n\n  .sd-floating-menu__buttons {\n   margin-top: 12px;\n   display: flex;\n   gap: 8px;\n   align-items: center;\n\n   &--1 {\n    justify-content: flex-end;\n   }\n\n   &--2 {\n    justify-content: space-between;\n   }\n  }\n }\n\n &__close-button {\n  position: absolute;\n  top: 16px;\n  right: 12px;\n  padding: 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n }\n}\n","import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'sd-floating-portal',\n styleUrl: 'sd-floating-portal.scss',\n})\nexport class SdFloatingPopover {\n @Element() el!: HTMLElement;\n @Prop() to: HTMLElement | string = 'body';\n @Prop() parentRef: HTMLElement | null = null;\n @Prop() offset: [number, number] = [0, 0];\n @Prop() zIndex: number = 9999;\n @Prop() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';\n @Prop() open: boolean = false;\n\n @Event({ eventName: 'sdClose' }) close!: EventEmitter<void>;\n\n private container?: HTMLElement;\n private wrapper?: HTMLElement;\n private rafId?: number;\n private isInsideClick = false;\n\n private resizeObserver?: ResizeObserver;\n private mutationObserver?: MutationObserver;\n\n private static readonly ARROW_SIZE = 11.2;\n\n componentDidLoad() {\n  this.container = this.resolveContainer();\n  this.createWrapper();\n  this.moveSlotContent();\n\n  // DOM이 완전히 렌더링된 후 위치 계산\n  requestAnimationFrame(() => {\n   this.updatePosition();\n   if (this.wrapper) {\n    this.wrapper.style.visibility = 'visible'; // 위치 계산 후 표시\n   }\n  });\n\n  this.observeParent();\n }\n\n componentDidRender() {\n  if (!this.wrapper) return;\n\n  // this.wrapper.style.display = this.open ? 'block' : 'none';\n  // if (this.open) this.updatePosition();\n\n  if (this.open) {\n   this.wrapper.style.display = 'block';\n   // RAF를 사용해서 다음 프레임에 위치 업데이트\n   requestAnimationFrame(() => {\n    this.updatePosition();\n    if (this.wrapper) {\n     this.wrapper.style.visibility = 'visible';\n    }\n   });\n  } else {\n   this.wrapper.style.display = 'none';\n   this.wrapper.style.visibility = 'hidden';\n  }\n }\n\n disconnectedCallback() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n  this.unobserveParent();\n  this.wrapper?.remove();\n }\n\n private resolveContainer(): HTMLElement {\n  const el = typeof this.to === 'string' ? document.querySelector(this.to) : this.to;\n  return el instanceof HTMLElement ? el : document.body;\n }\n\n private createWrapper() {\n  this.wrapper = document.createElement('div');\n  Object.assign(this.wrapper.style, {\n   position: 'absolute',\n   zIndex: this.zIndex.toString(),\n   transition: 'opacity 0.4s',\n   top: '-9999px',\n   left: '-9999px',\n  });\n  this.container!.appendChild(this.wrapper);\n }\n\n private moveSlotContent() {\n  if (!this.wrapper) return;\n  const nodes = Array.from(this.el.childNodes).filter(n => n.nodeType !== Node.COMMENT_NODE);\n  nodes.forEach(n => this.wrapper!.appendChild(n));\n }\n\n // 위치 갱신 (scroll / resize)\n @Listen('scroll', { target: 'window' })\n @Listen('resize', { target: 'window' })\n updatePosition() {\n  if (this.rafId) cancelAnimationFrame(this.rafId);\n\n  this.rafId = requestAnimationFrame(() => {\n   if (!this.parentRef || !this.wrapper) return;\n\n   const rect = this.parentRef.getBoundingClientRect();\n   if (!rect.width && !rect.height) return; // 요소가 보이지 않는 경우\n\n   const [offsetX, offsetY] = this.offset;\n   const ARROW_SIZE = SdFloatingPopover.ARROW_SIZE;\n\n   let top = 0;\n   let left = 0;\n\n   switch (this.placement) {\n    case 'top':\n     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n     break;\n\n    case 'bottom':\n     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;\n     left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;\n     break;\n\n    case 'left':\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;\n     break;\n\n    case 'right':\n     top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;\n     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;\n     break;\n   }\n\n   Object.assign(this.wrapper!.style, {\n    top: `${top}px`,\n    left: `${left}px`,\n   });\n  });\n }\n\n // parentRef의 이동 / 크기변경 감지\n private observeParent() {\n  if (!this.parentRef) return;\n\n  this.resizeObserver = new ResizeObserver(() => this.updatePosition());\n  this.resizeObserver.observe(this.parentRef);\n\n  this.mutationObserver = new MutationObserver(() => this.updatePosition());\n  this.mutationObserver.observe(document.body, {\n   childList: true,\n   subtree: true,\n  });\n }\n\n private unobserveParent() {\n  this.resizeObserver?.disconnect();\n  this.mutationObserver?.disconnect();\n }\n\n // 외부 클릭 감지\n @Listen('mousedown', { target: 'window' })\n handleMouseDown(e: MouseEvent) {\n  this.isInsideClick = !!(\n   (this.wrapper && this.wrapper.contains(e.target as Node)) ||\n   (this.parentRef && this.parentRef.contains(e.target as Node))\n  );\n }\n\n @Listen('click', { target: 'window' })\n handleWindowClick(e: MouseEvent) {\n  if (this.isInsideClick) {\n   this.isInsideClick = false;\n   return;\n  }\n  if (this.wrapper?.contains(e.target as Node)) return;\n  this.close.emit();\n }\n\n render() {\n  return <slot></slot>;\n }\n}\n"],"version":3}

package/dist/components/p-CdGD6AqM.js

@@ -0,0 +1,92 @@
+import { p as proxyCustomElement, H, h, t as transformTag } from './p-YLoygqPr.js';
+import { r as resolveColor } from './p-DcGvp3RM.js';
+import { d as defineCustomElement$1 } from './p-DnQF6htq.js';
+
+const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{text-decoration:none;cursor:pointer;border-radius: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}.sd-button--xs{padding:0 8px;font-size:12px;font-weight:500;line-height:20px;min-height:24px}.sd-button--sm{padding:0 12px;font-size:12px;font-weight:500;line-height:20px;min-height:28px}.sd-button--md{padding:0 20px;font-size:16px;font-weight:500;line-height:26px;min-height:34px}.sd-button--lg{padding:0 28px;font-size:18px;font-weight:500;line-height:30px;min-height:62px}.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: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:1px solid #cccccc;background:#e1e1e1;color:#888888;cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:fit-content;height:fit-content;aspect-ratio:1/1}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:4px;z-index:1;font-weight:500}`;
+
+const ICON_SIZES = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+};
+const SdButton = /*@__PURE__*/ proxyCustomElement(class SdButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    get el() { return this; }
+    variant = 'primary';
+    size = 'sm';
+    color = '#025497';
+    label = '';
+    disabled = false;
+    type = 'button';
+    icon;
+    iconColor;
+    iconSize;
+    iconRight;
+    noHover = false;
+    class = '';
+    getButtonClasses() {
+        const classes = ['sd-button'];
+        classes.push(`sd-button--${this.variant}`);
+        classes.push(`sd-button--${this.size}`);
+        classes.push(`sd-button--color-${this.color}`);
+        if (this.disabled) {
+            classes.push('sd-button--disabled');
+        }
+        if (!this.label && (this.icon || this.iconRight)) {
+            classes.push('sd-button--icon-only');
+        }
+        if (this.noHover) {
+            classes.push('sd-button--no-hover');
+        }
+        return classes.join(' ');
+    }
+    render() {
+        const buttonClasses = this.getButtonClasses();
+        // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
+        const resolvedColor = resolveColor(this.color);
+        return (h("button", { key: '9b92f98528d06453492eab68bb6137bcaefbf656', class: `${buttonClasses} ${this.class}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor } }, h("div", { key: 'a7dae76ec9112b95c2ee765cb2f9b0b4fe5f705a', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '71784bfcb2d08c77305a70311192dfc2c059ff0a', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'bc4b7dec430602765e98fa484d397b141686d8e7', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '26744c6ace43cbbfc9758a8fdf0174b49f24cd2c', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+    }
+    static get style() { return sdButtonCss(); }
+}, [768, "sd-button", {
+        "variant": [1],
+        "size": [1],
+        "color": [1],
+        "label": [1],
+        "disabled": [4],
+        "type": [1],
+        "icon": [1],
+        "iconColor": [1, "icon-color"],
+        "iconSize": [2, "icon-size"],
+        "iconRight": [1, "icon-right"],
+        "noHover": [4, "no-hover"],
+        "class": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["sd-button", "sd-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "sd-button":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), SdButton);
+            }
+            break;
+        case "sd-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SdButton as S, defineCustomElement as d };
+//# sourceMappingURL=p-CdGD6AqM.js.map
+
+//# sourceMappingURL=p-CdGD6AqM.js.map

package/dist/components/p-CdGD6AqM.js.map

@@ -0,0 +1 @@
+{"file":"p-CdGD6AqM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sd-button/sd-button.scss?tag=sd-button","src/components/sd-button/sd-button.tsx"],"sourcesContent":["@import 'variables';\n\nsd-button {\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n}\n\n.sd-button {\n text-decoration: none;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.2s ease-in-out;\n position: relative;\n overflow: hidden;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n &--xs {\n  padding: 0 8px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 24px;\n }\n &--sm {\n  padding: 0 12px;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 20px;\n  min-height: 28px;\n }\n &--md {\n  padding: 0 20px;\n  font-size: 16px;\n  font-weight: 500;\n  line-height: 26px;\n  min-height: 34px;\n }\n &--lg {\n  padding: 0 28px;\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 30px;\n  min-height: 62px;\n }\n &--primary {\n  background-color: var(--button-color);\n  color: white;\n  transition: filter 0.2s ease;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: #000000;\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.25;\n  }\n }\n\n &--outline {\n  background: white;\n  border: 1px solid var(--button-color);\n  color: var(--button-color);\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--ghost {\n  background-color: transparent;\n  color: var(--button-color);\n  border-color: transparent;\n\n  &::before {\n   content: '';\n   position: absolute;\n   inset: 0;\n   background: var(--button-color);\n   opacity: 0;\n   transition: opacity 0.2s ease;\n   z-index: 0;\n  }\n\n  &:hover:not(.sd-button--disabled):not(.sd-button--loading)::before {\n   opacity: 0.15;\n  }\n\n  .sd-button__content {\n   position: relative;\n   z-index: 1;\n  }\n }\n &--disabled {\n  border: 1px solid $grey_45;\n  background: $grey_30;\n  color: $grey_65;\n  cursor: not-allowed !important;\n }\n &--icon-only {\n  padding: 0;\n  width: fit-content;\n  height: fit-content;\n  aspect-ratio: 1 / 1;\n }\n &--no-hover {\n  &:hover::before {\n   opacity: 0 !important;\n  }\n }\n\n .sd-button__content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n\n  z-index: 1;\n  font-weight: 500;\n }\n}\n\n// /* Focus styles */\n// .sd-button:focus-visible {\n//  outline: 2px solid $primary;\n//  outline-offset: 2px;\n// }\n\n// /* High contrast mode support */\n// @media (prefers-contrast: high) {\n//  .sd-button {\n//   border-width: 2px;\n//  }\n// }\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { resolveColor } from '../../utils/color';\n\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst ICON_SIZES: { [key in ButtonSize]: number } = {\n xs: 12,\n sm: 16,\n md: 20,\n lg: 24,\n};\n\n@Component({\n tag: 'sd-button',\n styleUrl: 'sd-button.scss',\n})\nexport class SdButton {\n @Element() el!: HTMLElement;\n\n @Prop() variant?: ButtonVariant = 'primary';\n @Prop() size: ButtonSize = 'sm';\n @Prop() color: string = '#025497';\n @Prop() label: string = '';\n @Prop() disabled: boolean = false;\n @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n @Prop() icon?: IconName;\n @Prop() iconColor?: string;\n @Prop() iconSize?: number;\n @Prop() iconRight?: IconName;\n @Prop() noHover: boolean = false;\n @Prop() class: string = '';\n\n private getButtonClasses(): string {\n  const classes = ['sd-button'];\n\n  classes.push(`sd-button--${this.variant}`);\n  classes.push(`sd-button--${this.size}`);\n  classes.push(`sd-button--color-${this.color}`);\n\n  if (this.disabled) {\n   classes.push('sd-button--disabled');\n  }\n\n  if (!this.label && (this.icon || this.iconRight)) {\n   classes.push('sd-button--icon-only');\n  }\n\n  if (this.noHover) {\n   classes.push('sd-button--no-hover');\n  }\n\n  return classes.join(' ');\n }\n\n render() {\n  const buttonClasses = this.getButtonClasses();\n  // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)\n  const resolvedColor = resolveColor(this.color);\n\n  return (\n   <button\n    class={`${buttonClasses} ${this.class}`}\n    type={this.type}\n    disabled={this.disabled}\n    style={{ '--button-color': resolvedColor }}\n   >\n    <div class=\"sd-button__content\">\n     {this.icon && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--left\"\n       name={this.icon}\n       size={this.iconSize ?? ICON_SIZES[this.size!]}\n       color={this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor)}\n      ></sd-icon>\n     )}\n\n     {this.label && <div class=\"sd-button__label\">{this.label}</div>}\n\n     {this.iconRight && (\n      <sd-icon\n       class=\"sd-button__icon sd-button__icon--right\"\n       name={this.iconRight}\n       size={ICON_SIZES[this.size!]}\n       color={this.variant === 'primary' ? '#fff' : resolvedColor}\n      ></sd-icon>\n     )}\n    </div>\n   </button>\n  );\n }\n}\n"],"version":3}