@sellmate/design-system 1.0.78 → 1.2.0

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

@@ -9,11 +9,15 @@ export class SdPopover {
     icon = 'helpOutline';
     iconSize = 12;
     label = '';
-    buttonSize = 'sm';
-    buttonVariant = 'primary';
+    name = 'primary_sm';
+    rightIcon;
+    ariaLabel = '';
+    disabled = false;
+    type = 'button';
     menuTitle;
     messages = [];
-    buttons = [];
+    leftLink;
+    button;
     menuClass = '';
     useClose = false;
     showChange;
@@ -42,19 +46,22 @@ export class SdPopover {
         const color = this.color ?? '#01BB4B';
         const icon = this.icon ?? 'helpOutline';
         const iconSize = this.iconSize ?? 12;
-        const buttonSize = this.buttonSize ?? 'sm';
-        const buttonVariant = this.buttonVariant ?? 'primary';
         const menuClass = this.menuClass ?? '';
         const messages = Array.isArray(this.messages) ? this.messages : [];
-        const buttons = Array.isArray(this.buttons) ? this.buttons : [];
-        return (h(Fragment, { key: 'e576deaacba9395c5aeb76fd13baa0dc1e908d38' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: buttonSize, color: color, variant: buttonVariant, class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: '7520067b46527c22108292a659dd7e8fba85397c', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'ba48632dd93359851bd87f4d55f2341653b0caab', class: {
+        const leftLink = this.leftLink;
+        const button = this.button;
+        const hasFooter = !!leftLink || !!button;
+        return (h(Fragment, { key: '15b78d688d095fb15d5e6188dc848593bfec842e' }, this.label !== '' ? (h("sd-button", { ref: el => (this.buttonEl = el), name: this.name ?? 'primary_sm', label: this.label, icon: icon, rightIcon: this.rightIcon, ariaLabel: this.ariaLabel, disabled: this.disabled, type: this.type ?? 'button', class: "sd-popover", onSdClick: () => this.setShow(!this.show) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: iconSize, color: color, class: "sd-popover", onClick: () => this.setShow(!this.show) })), this.show && (h("sd-floating-portal", { key: 'c77807f72410fb9c96a94e06fa9bb953ef934b4d', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: placement, offset: this.popoverOffset }, h("div", { key: 'dfffd8eada595286469c17ed549d60539d9b3ca6', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${placement}`]: true,
-                [menuClass]: !!menuClass,
+                [menuClass]: menuClass !== '',
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: 'fce80e5bc6f49f5dbc1772f910eae0fb9bc09a6b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '32aaa3b00f7ac77d47fd2bc3c968a7a4c20102c6' })), h("div", { key: '29b3240126412070466acee7ee1d061d235ba51e', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '6cb5cf4531f573e93146a552b34831dc04851661', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: 'ba15bb4efc4af37dd89b0da61539f516cc31a2f3', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), buttons.length > 0 && (h("div", { key: '2656545909634d8c54e9d34155e699041b5512f5', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${buttons.length}` }, buttons.map((button, i) => (h("sd-button", { key: `btn-${i}`, ...button })))))), this.useClose && (h("sd-ghost-button", { key: '315bf10dde1b7cde5727beb101a1a1ad07966138', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
+            } }, h("i", { key: '0852ebe804a7e305383f58dae7e0088f2456f53a', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: 'c470c8ccebdb920b1c14940dffe11ad619560fb7' })), h("div", { key: 'fcca2e3bc61cd64110e86da4ee483dc5b1101b7c', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: 'fad331bcd9c73e72ed013826db69badd8b7a069f', class: "sd-floating-menu__title" }, this.menuTitle), messages.length > 0 && (h("div", { key: 'c83d0be758758fc720d1c3d00aaa8f0cb865cf12', class: "sd-floating-menu__messages" }, messages.map((message, i) => (h("div", { key: `msg-${i}` }, message))))), hasFooter && (h("div", { key: '821a434f478d8aee61e81026ccc37f75579e290e', class: {
+                'sd-floating-menu__buttons': true,
+                'sd-floating-menu__buttons--with-link': !!leftLink,
+            } }, leftLink && (h("sd-text-link", { key: '4b28ebf22197453c403066daf97d8925b0a4a8e1', class: "sd-floating-menu__left-link", label: leftLink.label, icon: leftLink.icon ?? '', iconColor: leftLink.iconColor ?? '', useArrow: !!leftLink.useArrow, underline: !!leftLink.underline, disabled: !!leftLink.disabled, onSdClick: leftLink.onClick })), button && (h("sd-button", { key: 'af8bdfa4a994bafa9b7329e149b62480d5f3d97c', name: button.name ?? 'secondary_xs', label: button.label, icon: button.icon, rightIcon: button.rightIcon, ariaLabel: button.ariaLabel, disabled: button.disabled, type: button.type, onSdClick: button.onClick }))))), this.useClose && (h("sd-ghost-button", { key: 'a8031ecc0aa0721adab17031019a079bc2bdce88', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: this.handleClose })))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {
@@ -134,7 +141,7 @@ export class SdPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -194,18 +201,18 @@ export class SdPopover {
                 "attribute": "label",
                 "defaultValue": "''"
             },
-            "buttonSize": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonSize",
-                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+                    "original": "ButtonName",
+                    "resolved": "\"danger_lg\" | \"danger_md\" | \"danger_outline_lg\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_outline_lg\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"primary_lg\" | \"primary_md\" | \"primary_outline_lg\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_lg\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
                     "references": {
-                        "ButtonSize": {
+                        "ButtonName": {
                             "location": "import",
-                            "path": "../sd-button/sd-button",
-                            "id": "src/components/sd-button/sd-button.tsx::ButtonSize",
-                            "referenceLocation": "ButtonSize"
+                            "path": "../sd-button/sd-button.config",
+                            "id": "src/components/sd-button/sd-button.config.ts::ButtonName",
+                            "referenceLocation": "ButtonName"
                         }
                     }
                 },
@@ -217,22 +224,86 @@ export class SdPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "button-size",
-                "defaultValue": "'sm'"
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'primary_sm'"
+            },
+            "rightIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "references": {
+                        "IconName": {
+                            "location": "global",
+                            "id": "global::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-icon"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
             },
-            "buttonVariant": {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonVariant",
-                    "resolved": "\"ghost\" | \"outline\" | \"primary\"",
+                    "original": "ButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                     "references": {
-                        "ButtonVariant": {
+                        "ButtonType": {
                             "location": "import",
-                            "path": "../sd-button/sd-button",
-                            "id": "src/components/sd-button/sd-button.tsx::ButtonVariant",
-                            "referenceLocation": "ButtonVariant"
+                            "path": "../sd-button/sd-button.config",
+                            "id": "src/components/sd-button/sd-button.config.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -244,9 +315,9 @@ export class SdPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "button-variant",
-                "defaultValue": "'primary'"
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
             },
             "menuTitle": {
                 "type": "string",
@@ -285,12 +356,35 @@ export class SdPopover {
                 "setter": false,
                 "defaultValue": "[]"
             },
-            "buttons": {
+            "leftLink": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "PopoverButton[]",
-                    "resolved": "PopoverButton[]",
+                    "original": "PopoverLink",
+                    "resolved": "(Partial<Pick<SdTextLink, \"disabled\" | \"underline\" | \"icon\" | \"iconColor\" | \"useArrow\">> & { label: string; onClick?: ((e: Event) => void) | undefined; }) | undefined",
+                    "references": {
+                        "PopoverLink": {
+                            "location": "local",
+                            "path": "/Users/meijing/Documents/sellmate/frontend/design-system/packages/stencil/src/components/sd-popover/sd-popover.tsx",
+                            "id": "src/components/sd-popover/sd-popover.tsx::PopoverLink"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "button": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverButton",
+                    "resolved": "(Partial<Pick<SdButton, \"type\" | \"name\" | \"disabled\" | \"icon\" | \"rightIcon\" | \"ariaLabel\">> & { label: string; onClick?: ((e: Event) => void) | undefined; }) | undefined",
                     "references": {
                         "PopoverButton": {
                             "location": "local",
@@ -300,14 +394,13 @@ export class SdPopover {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
+                "setter": false
             },
             "menuClass": {
                 "type": "string",

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

@@ -0,0 +1,34 @@
+import popupTokens from "../../tokens/generated/component.popup.json";
+const { popup } = popupTokens;
+export const POPUP_LAYOUT = {
+    bodyBg: popup.bg,
+};
+export const POPUP_HEADER = {
+    bg: {
+        default: popup.header.bg.default,
+        light: popup.header.bg.inverse,
+    },
+    titleColor: {
+        default: popup.header.title.default,
+        light: popup.header.title.inverse,
+    },
+    fontFamily: popup.header.typography.fontFamily,
+    fontWeight: popup.header.typography.fontWeight,
+    fontSize: Number(popup.header.typography.fontSize),
+    lineHeight: Number(popup.header.typography.lineHeight),
+    // TODO: 토큰 반영 후 교체
+    height: 50,
+    paddingX: 16,
+    paddingY: 10,
+};
+export const POPUP_FOOTER = {
+    bg: popup.footer.bg,
+    paddingX: Number(popup.footer.paddingX),
+    paddingY: Number(popup.footer.paddingY),
+    gap: Number(popup.footer.gap),
+    // TODO: 토큰 반영 후 교체
+    height: 52,
+    slotHeight: 36,
+    // TODO: shadow/spread/md 토큰 반영 후 교체
+    shadow: '0 -2px 8px 0 rgba(0, 0, 0, 0.08)',
+};

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

@@ -0,0 +1,73 @@
+sd-popup {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+sd-popup .sd-popup {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: var(--sd-popup-bg);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+sd-popup .sd-popup__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 100%;
+  height: var(--sd-popup-header-height);
+  padding: var(--sd-popup-header-padding-y) var(--sd-popup-header-padding-x);
+  background: var(--sd-popup-header-bg);
+  box-sizing: border-box;
+}
+sd-popup .sd-popup__title {
+  margin: 0;
+  color: var(--sd-popup-header-title-color);
+  font-family: var(--sd-popup-header-font-family);
+  font-weight: var(--sd-popup-header-font-weight);
+  font-size: var(--sd-popup-header-font-size);
+  line-height: var(--sd-popup-header-line-height);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+sd-popup .sd-popup__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+sd-popup .sd-popup__footer {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 100%;
+  height: var(--sd-popup-footer-height);
+  padding: var(--sd-popup-footer-padding-y) var(--sd-popup-footer-padding-x);
+  gap: var(--sd-popup-footer-gap);
+  background: var(--sd-popup-footer-bg);
+  box-shadow: var(--sd-popup-footer-shadow);
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+}
+sd-popup .sd-popup__footer-slot {
+  display: flex;
+  align-items: center;
+  height: var(--sd-popup-footer-slot-height);
+}
+sd-popup .sd-popup__footer-slot--left {
+  justify-content: flex-start;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+sd-popup .sd-popup__footer-slot:empty {
+  display: none;
+}
+sd-popup .sd-popup__submit {
+  flex-shrink: 0;
+  margin-left: auto;
+}

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

@@ -0,0 +1,163 @@
+import { h } from "@stencil/core";
+import { POPUP_FOOTER, POPUP_HEADER, POPUP_LAYOUT, } from "./sd-popup.config";
+const DEFAULT_SUBMIT_BUTTON_PROPS = {
+    name: 'primary_md',
+    label: '확인',
+};
+export class SdPopup {
+    popupTitle = '';
+    type = 'default';
+    useFooter = true;
+    submitButtonProps;
+    submit;
+    render() {
+        const cssVars = {
+            '--sd-popup-bg': POPUP_LAYOUT.bodyBg,
+            '--sd-popup-header-bg': POPUP_HEADER.bg[this.type],
+            '--sd-popup-header-title-color': POPUP_HEADER.titleColor[this.type],
+            '--sd-popup-header-font-family': POPUP_HEADER.fontFamily,
+            '--sd-popup-header-font-weight': POPUP_HEADER.fontWeight,
+            '--sd-popup-header-font-size': `${POPUP_HEADER.fontSize}px`,
+            '--sd-popup-header-line-height': `${POPUP_HEADER.lineHeight}px`,
+            '--sd-popup-header-height': `${POPUP_HEADER.height}px`,
+            '--sd-popup-header-padding-x': `${POPUP_HEADER.paddingX}px`,
+            '--sd-popup-header-padding-y': `${POPUP_HEADER.paddingY}px`,
+            '--sd-popup-footer-bg': POPUP_FOOTER.bg,
+            '--sd-popup-footer-padding-x': `${POPUP_FOOTER.paddingX}px`,
+            '--sd-popup-footer-padding-y': `${POPUP_FOOTER.paddingY}px`,
+            '--sd-popup-footer-gap': `${POPUP_FOOTER.gap}px`,
+            '--sd-popup-footer-height': `${POPUP_FOOTER.height}px`,
+            '--sd-popup-footer-slot-height': `${POPUP_FOOTER.slotHeight}px`,
+            '--sd-popup-footer-shadow': POPUP_FOOTER.shadow,
+        };
+        const submitButtonProps = {
+            ...DEFAULT_SUBMIT_BUTTON_PROPS,
+            ...this.submitButtonProps,
+        };
+        return (h("div", { key: '15e86848fe487b9df5b09a91e5319b35d7332a6e', class: `sd-popup sd-popup--${this.type}`, style: cssVars }, h("header", { key: 'd8281c73a80fe5a4b8ce3ca219e967932b0ec1d3', class: "sd-popup__header" }, h("h2", { key: '31031d3988bae465e023cc94713fb39ef9299250', class: "sd-popup__title" }, this.popupTitle)), h("div", { key: 'dfa941b0dc100b55fc08ab8cb9fce2835aaa62a5', class: "sd-popup__body" }, h("slot", { key: 'd7532a39c61746e8f517973e6fd4f7f3ac10fae0' })), this.useFooter && (h("footer", { key: 'aacedcc4c2f2e4336449bc0fbafc9f67d70cc763', class: "sd-popup__footer" }, h("div", { key: '8f093e0a8c24b03fa28e872b025cb159006d3449', class: "sd-popup__footer-slot sd-popup__footer-slot--left" }, h("slot", { key: '11e2cd175c7ae3151408ca7e564df0a37d6eebb5', name: "footer-left" })), h("sd-button", { key: '49b98d39181bd30392b7388dc7acc66caaca6038', ...submitButtonProps, class: "sd-popup__submit", onSdClick: () => this.submit.emit() })))));
+    }
+    static get is() { return "sd-popup"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-popup.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-popup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "popupTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popup-title",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopupType",
+                    "resolved": "\"default\" | \"light\"",
+                    "references": {
+                        "PopupType": {
+                            "location": "import",
+                            "path": "./sd-popup.config",
+                            "id": "src/components/sd-popup/sd-popup.config.ts::PopupType",
+                            "referenceLocation": "PopupType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "useFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-footer",
+                "defaultValue": "true"
+            },
+            "submitButtonProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ButtonProps",
+                    "resolved": "SdButton | undefined",
+                    "references": {
+                        "ButtonProps": {
+                            "location": "import",
+                            "path": "../sd-button/sd-button.config",
+                            "id": "src/components/sd-button/sd-button.config.ts::ButtonProps",
+                            "referenceLocation": "ButtonProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "submit",
+                "name": "sdSubmit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -103,7 +103,7 @@ export class SdPortal {
     }
     // 위치 갱신 (scroll / resize)
     updatePosition() {
-        if (this.rafId)
+        if (this.rafId !== undefined)
             cancelAnimationFrame(this.rafId);
         this.rafId = requestAnimationFrame(() => {
             if (!this.parentRef || !this.wrapper)
@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '28858d6833d8ff7f86295f7e445d51ffc84db99a' });
+        return h("slot", { key: '8b728e4a9a97cb1c4dbdaf8b6a6d85b37fc07af7' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -48,7 +48,7 @@ export class SdRadio {
             '--sd-radio-disabled-dot': RADIO_COLORS.disabled.dot,
             '--sd-radio-label-color': RADIO_COLORS.label,
         };
-        return (h("label", { key: '2b809f1f3ce39e6dd2429cf1c48a935500287614', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: '1f44ab44d741ef40152318ce6fd437bb091c3cfb', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: '941fddbb939a46afbe72c642d3b6f6f252f143f1', class: "sd-radio__circle" }), this.label && h("span", { key: 'e30139892e82b8da251525e3c717549a2b7522d0', class: "sd-radio__label" }, this.label)));
+        return (h("label", { key: 'bbbca45f706514a12be434ba877de0bd0f82c944', class: this.radioClasses, style: cssVars, "aria-checked": this.isSelected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("input", { key: 'e2cacd52037790cfe2d0eacacb975864858f73f8', type: "radio", name: String(this.val), value: String(this.val), checked: this.isSelected, disabled: this.disabled, "aria-label": this.label || String(this.val), onInput: this.handleRadioChange }), h("span", { key: 'bfbfdcb93536cef9fecbf1cc3a5dc5c2adbf5dd0', class: "sd-radio__circle" }), this.label && h("span", { key: '04c8d1e8de88bbb8d4041ebbbda00f58f8dc460c', class: "sd-radio__label" }, this.label)));
     }
     static get is() { return "sd-radio"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-radio-button/sd-radio-button.js

@@ -37,18 +37,21 @@ export class SdRadioButton {
         return classes.join(' ');
     }
     getGroupClasses() {
-        const classes = ['sd-radio-button', `sd-radio-button--${this.size}`];
+        const classes = ['sd-radio-button', `sd-radio-button--${this.size ?? 'sm'}`];
         return classes.join(' ');
     }
     _groupName;
     get groupName() {
-        if (!this._groupName) {
-            this._groupName = this.name || `sd-radio-button-${crypto.randomUUID()}`;
+        if (this._groupName == null || this._groupName === '') {
+            this._groupName =
+                this.name != null && this.name !== ''
+                    ? this.name
+                    : `sd-radio-button-${crypto.randomUUID()}`;
         }
         return this._groupName;
     }
     render() {
-        const sizeTokens = RADIO_BUTTON_SIZES[this.size];
+        const sizeTokens = RADIO_BUTTON_SIZES[this.size ?? 'sm'] ?? RADIO_BUTTON_SIZES.sm;
         const cssVars = {
             '--sd-radio-button-height': `${sizeTokens.height}px`,
             '--sd-radio-button-padding-x': `${sizeTokens.paddingX}px`,
@@ -72,7 +75,7 @@ export class SdRadioButton {
             '--sd-radio-button-content-select': RADIO_BUTTON_COLORS.content.select,
             '--sd-radio-button-content-disabled': RADIO_BUTTON_COLORS.content.disabled,
         };
-        return (h("div", { key: 'fbc0246d9cf615956121295e29bf8c702ee73edc', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
+        return (h("div", { key: '0eef3b536855ef3883628ce92a5dcb2846976d86', class: this.getGroupClasses(), style: cssVars, role: "radiogroup", "aria-disabled": this.disabled.toString() }, this.options.map(option => {
             const isSelected = this.isOptionSelected(option);
             const isDisabled = this.isOptionDisabled(option);
             return (h("label", { key: `radio-${option.value}`, class: this.getButtonClasses(option), "aria-label": option.label || 'radio option', "data-label": option.label }, h("input", { type: "radio", name: this.groupName, value: option.value.toString(), checked: isSelected, disabled: isDisabled, onInput: () => this.handleRadioChange(option.value, option.disabled) }), option.label && h("span", { class: "sd-radio-button__label" }, option.label)));

package/dist/collection/components/sd-radio-group/sd-radio-group.js

@@ -18,11 +18,11 @@ export class SdRadioGroup {
         this.change?.emit(resolved);
     };
     getGroupClasses() {
-        const classes = ['sd-radio-group', `sd-radio-group--${this.direction}`];
+        const classes = ['sd-radio-group', `sd-radio-group--${this.direction ?? 'vertical'}`];
         return classes.join(' ');
     }
     render() {
-        return (h("div", { key: '5f6559df018e48958103d0a84a0f074f81bd255a', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
+        return (h("div", { key: 'c5404526e6a21258d616f6459499b636a6636384', class: this.getGroupClasses(), role: "radiogroup" }, this.options.map(option => {
             return (h("sd-radio", { key: `radio-${option.value}`, val: String(option.value), value: String(this.value), label: option.label, disabled: this.disabled || !!option.disabled, onSdUpdate: ({ detail }) => this.handleRadioChange(detail) }));
         })));
     }

package/dist/collection/components/sd-select/sd-select-list-item/sd-select-list-item.js

@@ -64,9 +64,13 @@ export class SdSelectListItem {
             '--list-item-font-weight-selected': LIST_ITEM_TYPOGRAPHY.selectedFontWeight,
         };
         if (isDepth1Group) {
-            cssVars['--list-item-border-top'] = `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
+            cssVars['--list-item-border-top'] =
+                `${LIST_ITEM_COLORS.depth1.borderWidth}px solid ${LIST_ITEM_COLORS.depth1.border}`;
         }
-        return (h("div", { key: 'c6f959e9290213c9003914dbdd696c3c339cce51', class: {
+        return (
+        // 키보드 네비게이션은 부모 listbox 의 ArrowUp/Down + Enter 가 담당. 항목 자체는 role=option, tabindex=-1 으로 표시.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        h("div", { key: '8382966892edc2a46602733400aa579d0caa3128', role: "option", tabindex: -1, "aria-selected": this.isSelected === true ? 'true' : 'false', class: {
                 'sd-select-list-item': true,
                 'sd-select-list-item--group': isGroup,
                 'sd-select-list-item--depth1-group': isDepth1Group,
@@ -76,7 +80,7 @@ export class SdSelectListItem {
                 'sd-select-list-item--focused': this.isFocused,
                 'sd-select-list-item--selectable': this.isSelectable && !this.option.disabled,
                 'sd-select-list-item--disabled': !!this.option.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'a884bd82722cd45efc19abd2139d08596f7eda86', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '9aacbeca13e591406454ef7e1c7be40a56a2926b', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '76be4eda3799cfa329016c2ea636feaf624e5025', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
+            }, style: cssVars, onClick: this.handleClick }, this.useCheckbox && (h("sd-checkbox", { key: 'f8d1bb696416265861cc3b61ca1dcaec52dc2d4a', value: this.isSelected === null ? null : !!this.isSelected, disabled: this.option.disabled, inverse: this.isFocused && this.isSelected !== false, class: "sd-select-list-item__checkbox", onClick: this.handleCheckboxClick, onSdUpdate: this.handleCheckboxUpdate })), h("span", { key: '0ce20554fb96ad650104a98d779f3ff64fabe381', class: "sd-select-list-item__label" }, this.option.label), this.countInfo && (h("span", { key: '4d2d8f5bd63373906544882ff5852134e3ecd4d3', class: "sd-select-list-item__count" }, "(", this.countInfo.selected, "/", this.countInfo.total, ")"))));
     }
     static get is() { return "sd-select-list-item"; }
     static get originalStyleUrls() {