@sellmate/design-system 1.0.41 → 1.0.42

package/dist/design-system/p-535b0778.entry.js

@@ -0,0 +1 @@
+import{r as s,g as t,h as e,F as o}from"./p-B8tGP77V.js";import{T as i}from"./p-BeCHKP_I.js";var a={icon:"12",color:"#888888"},n="#07284A";const c=class{constructor(t){s(this,t)}get el(){return t(this)}show=!1;placement="bottom";color="#01BB4B";icon="helpOutline";iconSize=12;label="";buttonSize="sm";buttonVariant="primary";menuTitle;messages=[];buttons=[];menuClass="";noHover=!0;useClose=!1;showPopover=!1;slotContent="";watchShowHandler(s){this.showPopover=s}componentWillLoad(){this.showPopover=this.show,this.slotContent=this.el.innerHTML}buttonEl;get popoverOffset(){switch(this.placement){case"top":return[0,-4];case"bottom":return[0,4];case"left":case"right":return[4,0]}}handleClose=()=>{this.showPopover=!1};render(){return e(o,{key:"f367ea2ada0fda7c28c943bd7bd48785b1810999"},this.label?e("sd-button",{ref:s=>this.buttonEl=s,label:this.label,icon:this.icon,size:this.buttonSize,color:this.color,variant:this.buttonVariant,class:"sd-popover",onSdClick:()=>this.showPopover=!this.showPopover}):e("sd-icon",{ref:s=>this.buttonEl=s,name:this.icon,size:this.iconSize,color:this.color,class:"sd-popover",onClick:()=>this.showPopover=!this.showPopover}),this.showPopover&&e("sd-floating-portal",{key:"afdb58bfdf25af2adc45a7b81221c1859b517a5a",parentRef:this.buttonEl,onSdClose:this.handleClose,placement:this.placement,offset:this.popoverOffset},e("div",{key:"38757707dd8c055674edbc2381409f5fd8712c8d",class:{"sd-floating-menu":!0,"sd-floating-menu--popover":!0,[`sd-floating-menu--${this.placement}`]:!0,[this.menuClass]:!!this.menuClass},style:{"--sd-floating-bg":n}},e("i",{key:"333bae4cb23470121d63d4d8b34a1d2b15837e7d",class:`sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}`},e(i,{key:"617781bb6fc8957576eb149471fd8bf0f44ca552"})),e("div",{key:"8c57d49782edd344c8c2c0b9bf44fff8ec154159",class:"sd-floating-menu__content"},this.menuTitle&&e("div",{key:"a06b93124684cb96910ffa2603cf7410a01d6381",class:"sd-floating-menu__title"},this.menuTitle),this.messages.length>0&&e("div",{key:"24691930b8ae03a3c92ed8e74dae708b5e64f03b",class:"sd-floating-menu__messages"},this.messages.map((s=>e("div",null,s)))),this.buttons.length>0&&e("div",{key:"d73cd4cc978711857c4c946dd2a1c1b64bb5feb6",class:`sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}`},this.buttons.map((s=>e("sd-button",{...s}))))),this.useClose&&e("button",{key:"cda218024d04b03fc2931afa99f0127bc7a9c4c5",title:"close",class:"sd-floating-menu__close-button",onClick:()=>this.handleClose()},e("sd-icon",{key:"3f41ebce27fd4bab823370d6bbe25b5caed9d5e1",name:"close",size:a.icon,color:a.color})))))}static get watchers(){return{show:[{watchShowHandler:0}]}}};c.style="sd-popover{position:relative;cursor:pointer;display:inline-flex}";export{c as sd_popover}

package/dist/design-system/p-6db4e8c7.entry.js

@@ -0,0 +1 @@
+import{r as t,g as s,h as i}from"./p-B8tGP77V.js";let e=0;const o=class{constructor(s){t(this,s)}get el(){return s(this)}entries=[];isVisible=!1;isBackdropVisible=!1;contentRef;containerDismissTimerId;handleKeydown(t){if("Escape"===t.key){const t=this.getTopEntry();if(!t)return;if(t.persistent)return void this.shakeModal(t.modalEl);this.requestDismiss(t.id,"close")}}async open(t,s){const i="modal-"+ ++e,o=this.createConfirmModal(i,t);return this.containerDismissTimerId&&(clearTimeout(this.containerDismissTimerId),this.containerDismissTimerId=void 0),this.entries=[...this.entries??[],{id:i,modalEl:o,chain:s,persistent:!!t.persistent,closeAction:t.closeAction??"none",closing:!1}],this.isVisible=!0,requestAnimationFrame((()=>{this.contentRef&&(this.contentRef.appendChild(o),this.waitForModalReady(o).then((()=>{requestAnimationFrame((()=>{const t=(this.entries??[]).find((t=>t.id===i));t&&!t.closing&&o.isConnected&&(this.isBackdropVisible=!0,o.classList.add("sd-modal-container__modal--visible"))}))})))})),i}async update(t,s){const i=(this.entries??[]).find((s=>s.id===t));i&&!i.closing&&this.applyProps(i.modalEl,s)}createConfirmModal(t,s){const i=document.createElement("sd-confirm-modal");return i.setAttribute("data-modal-id",t),i.classList.add("sd-modal-container__modal"),this.applyProps(i,s),i.addEventListener("sdOk",(()=>{this.requestDismiss(t,"confirm")})),i.addEventListener("sdClose",(()=>{this.requestDismiss(t,"close")})),i}applyProps(t,s){this.hasOwnProp(s,"type")&&this.setAttr(t,"type",s.type),this.hasOwnProp(s,"title")&&this.setAttr(t,"modal-title",s.title),this.hasOwnProp(s,"titleClass")&&this.setAttr(t,"title-class",s.titleClass),this.hasOwnProp(s,"mainButtonLabel")&&this.setAttr(t,"main-button-label",s.mainButtonLabel),this.hasOwnProp(s,"mainButtonName")&&this.setAttr(t,"main-button-name",s.mainButtonName),this.hasOwnProp(s,"subButtonLabel")&&this.setAttr(t,"sub-button-label",s.subButtonLabel),this.hasOwnProp(s,"tagPreset")&&this.setAttr(t,"tag-preset",s.tagPreset),this.hasOwnProp(s,"tagLabel")&&this.setAttr(t,"tag-label",s.tagLabel),this.hasOwnProp(s,"slotLabel")&&this.setAttr(t,"slot-label",s.slotLabel),this.hasOwnProp(s,"topMessage")&&(t.topMessage=s.topMessage??[]),this.hasOwnProp(s,"bottomMessage")&&(t.bottomMessage=s.bottomMessage??[]),this.hasOwnProp(s,"tagContents")&&(t.tagContents=s.tagContents)}handleBackdropClick=()=>{const t=this.getTopEntry();t&&(t.persistent?this.shakeModal(t.modalEl):this.requestDismiss(t.id,"close"))};shakeModal(t){const s="sd-modal-container__modal--shake";t.classList.remove(s),t.addEventListener("animationend",(()=>t.classList.remove(s)),{once:!0}),requestAnimationFrame((()=>{t.classList.add(s)}))}disconnectedCallback(){(this.entries??[]).forEach((t=>{t.dismissTimerId&&clearTimeout(t.dismissTimerId)})),this.containerDismissTimerId&&clearTimeout(this.containerDismissTimerId)}getTopEntry(){return[...this.entries??[]].reverse().find((t=>!t.closing))}requestDismiss(t,s){const i=(this.entries??[]).find((s=>s.id===t));if(!i||i.closing)return;i.modalEl.classList.remove("sd-modal-container__modal--visible"),0===(this.entries??[]).filter((s=>s.id!==t&&!s.closing)).length&&(this.isBackdropVisible=!1);const e=setTimeout((()=>{this.finalizeDismiss(t)}),350);this.entries=(this.entries??[]).map((s=>s.id===t?{...s,closing:!0,dismissTimerId:e}:s)),"close"===s?"ok"===i.closeAction?i.chain._triggerOk():"cancel"===i.closeAction&&i.chain._triggerCancel():("confirm"===s&&i.chain._triggerOk(),"cancel"===s&&i.chain._triggerCancel())}finalizeDismiss(t){const s=(this.entries??[]).find((s=>s.id===t));if(!s)return;s.dismissTimerId&&clearTimeout(s.dismissTimerId),s.modalEl.remove();const i=(this.entries??[]).filter((s=>s.id!==t));this.entries=i,0===i.length&&(this.containerDismissTimerId=setTimeout((()=>{0===(this.entries??[]).length&&(this.isVisible=!1),this.containerDismissTimerId=void 0}),350))}waitForModalReady(t){const s=t.componentOnReady;return"function"==typeof s?s.call(t).then((()=>{})):new Promise((t=>{requestAnimationFrame((()=>{requestAnimationFrame((()=>t()))}))}))}hasOwnProp(t,s){return Object.prototype.hasOwnProperty.call(t,s)}setAttr(t,s,i){null!=i&&t.setAttribute(s,i)}render(){return this.isVisible?i("div",{class:"sd-modal-container"},i("div",{class:{"sd-modal-container__backdrop":!0,"sd-modal-container__backdrop--visible":this.isBackdropVisible},onClick:this.handleBackdropClick}),i("div",{class:"sd-modal-container__content",ref:t=>{this.contentRef=t}})):null}};o.style="sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 10000);display:flex;align-items:center;justify-content:center}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1}sd-modal-container .sd-modal-container__content{position:relative;z-index:1;display:grid;place-items:center}sd-modal-container .sd-modal-container__content>*{grid-row:1;grid-column:1}sd-modal-container .sd-modal-container__modal{opacity:0;transform:scale(0);transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}";export{o as sd_modal_container}

package/dist/design-system/p-f91f4fcc.entry.js

@@ -0,0 +1 @@
+import{r as o,c as t,g as i,h as e}from"./p-B8tGP77V.js";var s={title:{icon:"32"},positive:{icon:"#0075FF"},negative:{icon:"#E30000"}},a={size:"20",color:"#888888"};const d={positive:"primary_md",negative:"danger_md",default:"neutral_outline_md"},n={positive:"notificationOutline",negative:"warningOutline",default:null},l={positive:s.positive.icon,negative:s.negative.icon,default:""},c=Number(s.title.icon),m=Number(a.size),r=a.color,f=class{constructor(i){o(this,i),this.close=t(this,"sdClose"),this.ok=t(this,"sdOk")}get el(){return i(this)}hasSlottedContent=!1;customContentRef;slotObserver;type="positive";modalTitle="";titleClass="";topMessage=[];bottomMessage=[];mainButtonName;mainButtonLabel="확인";subButtonLabel="";tagPreset="square_sm_grey";tagLabel="";slotLabel="";tagContents;close;ok;componentWillLoad(){this.syncHasSlottedContent()}componentDidLoad(){"undefined"!=typeof MutationObserver&&(this.slotObserver=new MutationObserver((()=>this.syncHasSlottedContent())),this.slotObserver.observe(this.el,{childList:!0,characterData:!0}))}componentDidRender(){this.customContentRef&&this.tagContents instanceof HTMLElement&&("function"==typeof this.customContentRef.replaceChildren?this.customContentRef.replaceChildren(this.tagContents):(this.customContentRef.innerHTML="",this.customContentRef.appendChild(this.tagContents)))}disconnectedCallback(){this.slotObserver?.disconnect()}get resolvedMainButton(){return this.mainButtonName??d[this.type]}get hasTagContent(){return!(!this.tagLabel&&!this.slotLabel)}get showContentBox(){return!!this.tagContents||this.hasTagContent||this.hasSlottedContent}syncHasSlottedContent(){const o=Array.from(this.el.childNodes).some((o=>!(o.nodeType===Node.ELEMENT_NODE&&o.classList.contains("sd-confirm-modal"))&&(o.nodeType===Node.ELEMENT_NODE||o.nodeType===Node.TEXT_NODE&&o.textContent?.trim())));o!==this.hasSlottedContent&&(this.hasSlottedContent=o)}render(){const o=n[this.type],t=l[this.type];return e("div",{key:"9dd835c1020a29e99257690b5d4d6038b13fe5e4",class:"sd-confirm-modal"},e("sd-icon",{key:"17fea9642aabb047a8017c37beffe3e0b64707c2",class:"sd-confirm-modal__close-button",name:"close",size:m,color:r,onClick:()=>this.close.emit()}),o&&e("sd-icon",{key:"5198d65dbac64b483f63f8a65f7cad987a14e24b",class:"sd-confirm-modal__icon",name:o,size:c,color:t}),e("h2",{key:"045887b2224ed46f4d6158a2d3ffc25261a0156d",class:`sd-confirm-modal__title ${this.titleClass}`},this.modalTitle),e("div",{key:"7f9ce8c5bef7a8f9ee580671ccdb79c093066ee3",class:"sd-confirm-modal__body"},(this.topMessage??[]).length>0&&e("div",{key:"ac533ca4a1dc011d0bbb0c5c72c14228f680741a",class:"sd-confirm-modal__message"},(this.topMessage??[]).map((o=>e("p",{class:"sd-confirm-modal__message-text",innerHTML:o})))),this.showContentBox&&e("div",{key:"2fde04429ca9efb0b9ae30116e9a0fd7f57b904e",class:"sd-confirm-modal__content-box"},this.tagContents?e("div",{class:"sd-confirm-modal__custom-content",ref:o=>{this.customContentRef=o}}):e("slot",{onSlotchange:()=>this.syncHasSlottedContent()},this.tagLabel&&e("sd-tag",{name:this.tagPreset,label:this.tagLabel}),this.slotLabel&&e("span",{class:"sd-confirm-modal__slot-label"},this.slotLabel))),(this.bottomMessage??[]).length>0&&e("div",{key:"5f97a8bf91a60b553b21d80f4b133d2c79e97ba6",class:"sd-confirm-modal__message"},(this.bottomMessage??[]).map((o=>e("p",{class:"sd-confirm-modal__message-text",innerHTML:o}))))),e("div",{key:"4cde2779f11b274d71b90dd75584f8ccd9d3044d",class:"sd-confirm-modal__button"},this.subButtonLabel&&e("sd-button-v2",{key:"9e64571f556c6cfdb9c69dc70e54a2f4bdec7bb6",name:"neutral_outline_md",label:this.subButtonLabel,onSdClick:()=>this.close.emit()}),e("sd-button-v2",{key:"dd86f7cce973862d94e26910341995f743e1944b",name:this.resolvedMainButton,label:this.mainButtonLabel,onSdClick:()=>this.ok.emit()})))}};f.style="sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:16px;right:16px;cursor:pointer}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:22px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:32px}";export{f as sd_confirm_modal}

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

@@ -5134,6 +5134,14 @@ const SdTooltip = class {
     showTooltip = false;
     slotContentHTML = '';
     buttonEl;
+    get tooltipOffset() {
+        switch (this.placement) {
+            case 'top': return [0, -4];
+            case 'bottom': return [0, 4];
+            case 'left': return [4, 0];
+            case 'right': return [4, 0];
+        }
+    }
     handleClose = () => {
         this.showTooltip = false;
     };
@@ -5160,14 +5168,14 @@ const SdTooltip = class {
             : {
                 onSdClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (h(Fragment, { key: '53edf89a07b59cc1f6f3b84cbba7f4b77c6819c7' }, 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", ...buttonTrigger })) : (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: '0011143fc06ea5bcf0b800bc4baabb06dd822911', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, h("div", { key: '5cd0ed3132d542436a951bf74784d0aa0cd8078d', class: {
+        return (h(Fragment, { key: '2890811dd681299b155d191d6d6023441db6debc' }, 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", ...buttonTrigger })) : (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: '666cf59e0548af92eff225cd91b485824b82249d', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement, offset: this.tooltipOffset }, h("div", { key: 'ad5285750f95fdb0829372dd3b45d96035a02315', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.tooltipType}`]: true,
                 [`sd-floating-menu--${this.placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            } }, h("i", { key: '9502962bbd9a95f04d0b6bef1e03c0c048515090', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'b41486b3cecd413dd817b0a1384cfe9fb7255434' })), h("div", { key: 'ea15c6250d1b8dabc5c6ecf1b5c48674a877a3c4', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            } }, h("i", { key: 'ee92f004dbd17de84a3410bd555da735c5fcb4ca', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '04ccadfa1de8bcf3b64218e6e048fcbf09ff3301' })), h("div", { key: '0534c8cec5c79c8b0df3950d554a1b62d1e3b32b', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

package/dist/esm/sd-confirm-modal.entry.js

@@ -45,7 +45,7 @@ const SdConfirmModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "sdClose");
-        this.confirm = createEvent(this, "sdConfirm");
+        this.ok = createEvent(this, "sdOk");
     }
     get el() { return getElement(this); }
     hasSlottedContent = false;
@@ -64,7 +64,7 @@ const SdConfirmModal = class {
     slotLabel = '';
     tagContents;
     close;
-    confirm;
+    ok;
     componentWillLoad() {
         this.syncHasSlottedContent();
     }
@@ -112,9 +112,9 @@ const SdConfirmModal = class {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (h("div", { key: 'cbf103ed02ff04e90d1df1fffee08c572d9f5e18', class: "sd-confirm-modal" }, h("sd-icon", { key: 'dde88047b036420eb710b1edc22a72b0e5cdf784', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '84962276dc06729ef2d5212b615e6f309533c60c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: 'd4f78a41131a2d4f71f74bbe899fcdd96a650adc', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: 'd6019100eabbc46846c62d33d45f242f6f5fb899', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: '97c659470421aa9a32aecedea185df11bd208e4e', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: 'e8bc08bf5fa5e73e65df7b0b18b54053491a5ddb', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (h("div", { key: '9dd835c1020a29e99257690b5d4d6038b13fe5e4', class: "sd-confirm-modal" }, h("sd-icon", { key: '17fea9642aabb047a8017c37beffe3e0b64707c2', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (h("sd-icon", { key: '5198d65dbac64b483f63f8a65f7cad987a14e24b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), h("h2", { key: '045887b2224ed46f4d6158a2d3ffc25261a0156d', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), h("div", { key: '7f9ce8c5bef7a8f9ee580671ccdb79c093066ee3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (h("div", { key: 'ac533ca4a1dc011d0bbb0c5c72c14228f680741a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (h("div", { key: '2fde04429ca9efb0b9ae30116e9a0fd7f57b904e', class: "sd-confirm-modal__content-box" }, this.tagContents ? (h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: 'a45baf202c54267da618dead5b5f856eab5a50b2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '3249a262cf870671641cf57253995f5881718c53', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '18c42ded4eb94bf4059868ae7f8f18f94d238220', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: '4bc410cc5e9037fb7f5352910ac4fda0934bed38', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+            } })) : (h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (h("div", { key: '5f97a8bf91a60b553b21d80f4b133d2c79e97ba6', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), h("div", { key: '4cde2779f11b274d71b90dd75584f8ccd9d3044d', class: "sd-confirm-modal__button" }, this.subButtonLabel && (h("sd-button-v2", { key: '9e64571f556c6cfdb9c69dc70e54a2f4bdec7bb6', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), h("sd-button-v2", { key: 'dd86f7cce973862d94e26910341995f743e1944b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();

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

@@ -23,7 +23,7 @@ const SdModalContainer = class {
                 this.shakeModal(top.modalEl);
                 return;
             }
-            this.requestDismiss(top.id, 'cancel');
+            this.requestDismiss(top.id, 'close');
         }
     }
     async open(options, chain) {
@@ -33,7 +33,7 @@ const SdModalContainer = class {
             clearTimeout(this.containerDismissTimerId);
             this.containerDismissTimerId = undefined;
         }
-        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
+        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closeAction: options.closeAction ?? 'none', closing: false }];
         this.isVisible = true;
         requestAnimationFrame(() => {
             if (this.contentRef) {
@@ -62,11 +62,11 @@ const SdModalContainer = class {
         el.setAttribute('data-modal-id', id);
         el.classList.add('sd-modal-container__modal');
         this.applyProps(el, options);
-        el.addEventListener('sdConfirm', () => {
+        el.addEventListener('sdOk', () => {
             this.requestDismiss(id, 'confirm');
         });
         el.addEventListener('sdClose', () => {
-            this.requestDismiss(id, 'cancel');
+            this.requestDismiss(id, 'close');
         });
         return el;
     }
@@ -107,7 +107,7 @@ const SdModalContainer = class {
             this.shakeModal(top.modalEl);
             return;
         }
-        this.requestDismiss(top.id, 'cancel');
+        this.requestDismiss(top.id, 'close');
     };
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
@@ -141,10 +141,18 @@ const SdModalContainer = class {
             this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
         this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
-        if (reason === 'confirm')
-            entry.chain._triggerOk();
-        if (reason === 'cancel')
-            entry.chain._triggerCancel();
+        if (reason === 'close') {
+            if (entry.closeAction === 'ok')
+                entry.chain._triggerOk();
+            else if (entry.closeAction === 'cancel')
+                entry.chain._triggerCancel();
+        }
+        else {
+            if (reason === 'confirm')
+                entry.chain._triggerOk();
+            if (reason === 'cancel')
+                entry.chain._triggerCancel();
+        }
     }
     finalizeDismiss(id) {
         const entry = (this.entries ?? []).find(item => item.id === id);

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

@@ -42,18 +42,26 @@ const SdPopover = class {
         this.slotContent = this.el.innerHTML;
     }
     buttonEl;
+    get popoverOffset() {
+        switch (this.placement) {
+            case 'top': return [0, -4];
+            case 'bottom': return [0, 4];
+            case 'left': return [4, 0];
+            case 'right': return [4, 0];
+        }
+    }
     handleClose = () => {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '0ff8739ff39d53fdc5fb4553c4d8a483b1c089c8' }, 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-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'c2373df5edb583a6027575f9b489f669d7864367', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, h("div", { key: 'e86db6af4e6a1fac3c2ed78367bf95038d0e618a', class: {
+        return (h(Fragment, { key: 'f367ea2ada0fda7c28c943bd7bd48785b1810999' }, 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-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'afdb58bfdf25af2adc45a7b81221c1859b517a5a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: '38757707dd8c055674edbc2381409f5fd8712c8d', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: 'b5d9109d520bebc16b9b42e663f595d3287c4c9c', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '4981cc2c7bced0653be487ded749563baa17c068' })), h("div", { key: '9abaac42bed464418fb1bf13891ce26a98d78784', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '022ba941f74b58dd9221aec89a13aa295810b6da', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'c391e3db270e291864f0e10f98501bf00ebc9d05', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'ae10feb7e6c1cd98d7ddb3b0527954c2ff89aced', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: '0fc4fa46086167325c30403eb8f745f4a81a14d6', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '1b8b5c85a77036075a4554645fda2fabb97016a5', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, h("i", { key: '333bae4cb23470121d63d4d8b34a1d2b15837e7d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: '617781bb6fc8957576eb149471fd8bf0f44ca552' })), h("div", { key: '8c57d49782edd344c8c2c0b9bf44fff8ec154159', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'a06b93124684cb96910ffa2603cf7410a01d6381', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '24691930b8ae03a3c92ed8e74dae708b5e64f03b', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: 'd73cd4cc978711857c4c946dd2a1c1b64bb5feb6', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("button", { key: 'cda218024d04b03fc2931afa99f0127bc7a9c4c5', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, h("sd-icon", { key: '3f41ebce27fd4bab823370d6bbe25b5caed9d5e1', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{

package/dist/types/components/sd-confirm-modal/sd-confirm-modal.d.ts

@@ -18,7 +18,7 @@ export declare class SdConfirmModal {
     slotLabel: string;
     tagContents?: HTMLElement;
     close: EventEmitter<void>;
-    confirm: EventEmitter<void>;
+    ok: EventEmitter<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -1,5 +1,6 @@
 import type { ConfirmModalType, ConfirmModalMainButton } from '../sd-confirm-modal/sd-confirm-modal.config';
 import type { TagName } from '../sd-tag/sd-tag.config';
+export type CloseAction = 'ok' | 'cancel' | 'none';
 export interface ConfirmModalOptions {
     type?: ConfirmModalType;
     title?: string;
@@ -14,12 +15,14 @@ export interface ConfirmModalOptions {
     slotLabel?: string;
     tagContents?: HTMLElement;
     persistent?: boolean;
+    closeAction?: CloseAction;
 }
 export interface ModalEntry {
     id: string;
     modalEl: HTMLElement;
     chain: ModalDialogChainLike;
     persistent: boolean;
+    closeAction: CloseAction;
     closing: boolean;
     dismissTimerId?: ReturnType<typeof setTimeout>;
 }

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

@@ -22,6 +22,7 @@ export declare class SdPopover {
     watchShowHandler(newValue: boolean): void;
     componentWillLoad(): void;
     private buttonEl?;
+    private get popoverOffset();
     private handleClose;
     render(): any;
 }

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

@@ -15,6 +15,7 @@ export declare class SdTooltip {
     showTooltip: boolean;
     slotContentHTML: string;
     private buttonEl?;
+    private get tooltipOffset();
     private handleClose;
     componentWillLoad(): void;
     render(): any;

package/dist/types/components.d.ts

@@ -2059,7 +2059,7 @@ declare global {
     };
     interface HTMLSdConfirmModalElementEventMap {
         "sdClose": void;
-        "sdConfirm": void;
+        "sdOk": void;
     }
     interface HTMLSdConfirmModalElement extends Components.SdConfirmModal, HTMLStencilElement {
         addEventListener<K extends keyof HTMLSdConfirmModalElementEventMap>(type: K, listener: (this: HTMLSdConfirmModalElement, ev: SdConfirmModalCustomEvent<HTMLSdConfirmModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3053,7 +3053,7 @@ declare namespace LocalJSX {
          */
         "modalTitle"?: string;
         "onSdClose"?: (event: SdConfirmModalCustomEvent<void>) => void;
-        "onSdConfirm"?: (event: SdConfirmModalCustomEvent<void>) => void;
+        "onSdOk"?: (event: SdConfirmModalCustomEvent<void>) => void;
         /**
           * @default ''
          */

package/hydrate/index.js

@@ -6221,7 +6221,7 @@ class SdConfirmModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.close = createEvent(this, "sdClose");
-        this.confirm = createEvent(this, "sdConfirm");
+        this.ok = createEvent(this, "sdOk");
     }
     get el() { return getElement(this); }
     hasSlottedContent = false;
@@ -6240,7 +6240,7 @@ class SdConfirmModal {
     slotLabel = '';
     tagContents;
     close;
-    confirm;
+    ok;
     componentWillLoad() {
         this.syncHasSlottedContent();
     }
@@ -6288,9 +6288,9 @@ class SdConfirmModal {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (hAsync("div", { key: 'cbf103ed02ff04e90d1df1fffee08c572d9f5e18', class: "sd-confirm-modal" }, hAsync("sd-icon", { key: 'dde88047b036420eb710b1edc22a72b0e5cdf784', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '84962276dc06729ef2d5212b615e6f309533c60c', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: 'd4f78a41131a2d4f71f74bbe899fcdd96a650adc', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: 'd6019100eabbc46846c62d33d45f242f6f5fb899', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: '97c659470421aa9a32aecedea185df11bd208e4e', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: 'e8bc08bf5fa5e73e65df7b0b18b54053491a5ddb', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (hAsync("div", { key: '9dd835c1020a29e99257690b5d4d6038b13fe5e4', class: "sd-confirm-modal" }, hAsync("sd-icon", { key: '17fea9642aabb047a8017c37beffe3e0b64707c2', class: "sd-confirm-modal__close-button", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() }), iconName && (hAsync("sd-icon", { key: '5198d65dbac64b483f63f8a65f7cad987a14e24b', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), hAsync("h2", { key: '045887b2224ed46f4d6158a2d3ffc25261a0156d', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), hAsync("div", { key: '7f9ce8c5bef7a8f9ee580671ccdb79c093066ee3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (hAsync("div", { key: 'ac533ca4a1dc011d0bbb0c5c72c14228f680741a', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (hAsync("div", { key: '2fde04429ca9efb0b9ae30116e9a0fd7f57b904e', class: "sd-confirm-modal__content-box" }, this.tagContents ? (hAsync("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: 'a45baf202c54267da618dead5b5f856eab5a50b2', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '3249a262cf870671641cf57253995f5881718c53', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: '18c42ded4eb94bf4059868ae7f8f18f94d238220', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), hAsync("sd-button-v2", { key: '4bc410cc5e9037fb7f5352910ac4fda0934bed38', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.confirm.emit() }))));
+            } })) : (hAsync("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && hAsync("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (hAsync("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (hAsync("div", { key: '5f97a8bf91a60b553b21d80f4b133d2c79e97ba6', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (hAsync("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), hAsync("div", { key: '4cde2779f11b274d71b90dd75584f8ccd9d3044d', class: "sd-confirm-modal__button" }, this.subButtonLabel && (hAsync("sd-button-v2", { key: '9e64571f556c6cfdb9c69dc70e54a2f4bdec7bb6', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.close.emit() })), hAsync("sd-button-v2", { key: 'dd86f7cce973862d94e26910341995f743e1944b', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
     static get style() { return sdConfirmModalCss(); }
     static get cmpMeta() { return {
@@ -10078,7 +10078,7 @@ class SdModalContainer {
                 this.shakeModal(top.modalEl);
                 return;
             }
-            this.requestDismiss(top.id, 'cancel');
+            this.requestDismiss(top.id, 'close');
         }
     }
     async open(options, chain) {
@@ -10088,7 +10088,7 @@ class SdModalContainer {
             clearTimeout(this.containerDismissTimerId);
             this.containerDismissTimerId = undefined;
         }
-        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
+        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closeAction: options.closeAction ?? 'none', closing: false }];
         this.isVisible = true;
         requestAnimationFrame(() => {
             if (this.contentRef) {
@@ -10117,11 +10117,11 @@ class SdModalContainer {
         el.setAttribute('data-modal-id', id);
         el.classList.add('sd-modal-container__modal');
         this.applyProps(el, options);
-        el.addEventListener('sdConfirm', () => {
+        el.addEventListener('sdOk', () => {
             this.requestDismiss(id, 'confirm');
         });
         el.addEventListener('sdClose', () => {
-            this.requestDismiss(id, 'cancel');
+            this.requestDismiss(id, 'close');
         });
         return el;
     }
@@ -10162,7 +10162,7 @@ class SdModalContainer {
             this.shakeModal(top.modalEl);
             return;
         }
-        this.requestDismiss(top.id, 'cancel');
+        this.requestDismiss(top.id, 'close');
     };
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
@@ -10196,10 +10196,18 @@ class SdModalContainer {
             this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
         this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
-        if (reason === 'confirm')
-            entry.chain._triggerOk();
-        if (reason === 'cancel')
-            entry.chain._triggerCancel();
+        if (reason === 'close') {
+            if (entry.closeAction === 'ok')
+                entry.chain._triggerOk();
+            else if (entry.closeAction === 'cancel')
+                entry.chain._triggerCancel();
+        }
+        else {
+            if (reason === 'confirm')
+                entry.chain._triggerOk();
+            if (reason === 'cancel')
+                entry.chain._triggerCancel();
+        }
     }
     finalizeDismiss(id) {
         const entry = (this.entries ?? []).find(item => item.id === id);
@@ -10714,18 +10722,26 @@ class SdPopover {
         this.slotContent = this.el.innerHTML;
     }
     buttonEl;
+    get popoverOffset() {
+        switch (this.placement) {
+            case 'top': return [0, -4];
+            case 'bottom': return [0, 4];
+            case 'left': return [4, 0];
+            case 'right': return [4, 0];
+        }
+    }
     handleClose = () => {
         this.showPopover = false;
     };
     render() {
-        return (hAsync(Fragment, { key: '0ff8739ff39d53fdc5fb4553c4d8a483b1c089c8' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: 'c2373df5edb583a6027575f9b489f669d7864367', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement }, hAsync("div", { key: 'e86db6af4e6a1fac3c2ed78367bf95038d0e618a', class: {
+        return (hAsync(Fragment, { key: 'f367ea2ada0fda7c28c943bd7bd48785b1810999' }, this.label ? (hAsync("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (hAsync("sd-floating-portal", { key: 'afdb58bfdf25af2adc45a7b81221c1859b517a5a', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, hAsync("div", { key: '38757707dd8c055674edbc2381409f5fd8712c8d', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, hAsync("i", { key: 'b5d9109d520bebc16b9b42e663f595d3287c4c9c', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '4981cc2c7bced0653be487ded749563baa17c068' })), hAsync("div", { key: '9abaac42bed464418fb1bf13891ce26a98d78784', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: '022ba941f74b58dd9221aec89a13aa295810b6da', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: 'c391e3db270e291864f0e10f98501bf00ebc9d05', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'ae10feb7e6c1cd98d7ddb3b0527954c2ff89aced', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: '0fc4fa46086167325c30403eb8f745f4a81a14d6', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '1b8b5c85a77036075a4554645fda2fabb97016a5', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
+            } }, hAsync("i", { key: '333bae4cb23470121d63d4d8b34a1d2b15837e7d', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '617781bb6fc8957576eb149471fd8bf0f44ca552' })), hAsync("div", { key: '8c57d49782edd344c8c2c0b9bf44fff8ec154159', class: "sd-floating-menu__content" }, this.menuTitle && hAsync("div", { key: 'a06b93124684cb96910ffa2603cf7410a01d6381', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (hAsync("div", { key: '24691930b8ae03a3c92ed8e74dae708b5e64f03b', class: "sd-floating-menu__messages" }, this.messages.map(message => (hAsync("div", null, message))))), this.buttons.length > 0 && (hAsync("div", { key: 'd73cd4cc978711857c4c946dd2a1c1b64bb5feb6', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (hAsync("sd-button", { ...button })))))), this.useClose && (hAsync("button", { key: 'cda218024d04b03fc2931afa99f0127bc7a9c4c5', title: "close", class: "sd-floating-menu__close-button", onClick: () => this.handleClose() }, hAsync("sd-icon", { key: '3f41ebce27fd4bab823370d6bbe25b5caed9d5e1', name: "close", size: popoverTokens.popover.close.icon, color: popoverTokens.popover.close.color }))))))));
     }
     static get watchers() { return {
         "show": [{
@@ -15794,6 +15810,14 @@ class SdTooltip {
     showTooltip = false;
     slotContentHTML = '';
     buttonEl;
+    get tooltipOffset() {
+        switch (this.placement) {
+            case 'top': return [0, -4];
+            case 'bottom': return [0, 4];
+            case 'left': return [4, 0];
+            case 'right': return [4, 0];
+        }
+    }
     handleClose = () => {
         this.showTooltip = false;
     };
@@ -15820,14 +15844,14 @@ class SdTooltip {
             : {
                 onSdClick: () => (this.showTooltip = !this.showTooltip),
             };
-        return (hAsync(Fragment, { key: '53edf89a07b59cc1f6f3b84cbba7f4b77c6819c7' }, this.label ? (hAsync("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", ...buttonTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-floating-portal", { key: '0011143fc06ea5bcf0b800bc4baabb06dd822911', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement }, hAsync("div", { key: '5cd0ed3132d542436a951bf74784d0aa0cd8078d', class: {
+        return (hAsync(Fragment, { key: '2890811dd681299b155d191d6d6023441db6debc' }, this.label ? (hAsync("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", ...buttonTrigger })) : (hAsync("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-tooltip", ...handleTrigger })), this.showTooltip && (hAsync("sd-floating-portal", { key: '666cf59e0548af92eff225cd91b485824b82249d', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: this.placement, offset: this.tooltipOffset }, hAsync("div", { key: 'ad5285750f95fdb0829372dd3b45d96035a02315', class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${this.tooltipType}`]: true,
                 [`sd-floating-menu--${this.placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            } }, hAsync("i", { key: '9502962bbd9a95f04d0b6bef1e03c0c048515090', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: 'b41486b3cecd413dd817b0a1384cfe9fb7255434' })), hAsync("div", { key: 'ea15c6250d1b8dabc5c6ecf1b5c48674a877a3c4', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            } }, hAsync("i", { key: 'ee92f004dbd17de84a3410bd555da735c5fcb4ca', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, hAsync(TooltipArrow, { key: '04ccadfa1de8bcf3b64218e6e048fcbf09ff3301' })), hAsync("div", { key: '0534c8cec5c79c8b0df3950d554a1b62d1e3b32b', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get style() { return sdTooltipCss(); }
     static get cmpMeta() { return {