@nine-lab/nine-ux 0.1.142 → 0.1.144

package/dist/css/nineMenu.css

@@ -2,6 +2,8 @@
 
 /* ==========================================================================
    [MAIN INTEGRATED SIDE MENU COMPONENT]
+   부모가 Shadow DOM이므로 최상단은 :host로 시작해야 외부 분리 파일에서도
+   컴포넌트 자체를 정상적으로 인식합니다.
    ========================================================================== */
 :host(nine-side-menu) {
 	opacity: 0.95;
@@ -35,7 +37,7 @@
 		animation: nineMenuBounce 0.5s ease-in-out 1;
 	}
 
-	/* 본문 스크롤 감싸는 영역 */
+	/* 본문 스크롤 감싸는 영역 (Shadow DOM 내부 div) */
 	.body-wrapper {
 		display: flex;
 		flex-direction: column;
@@ -48,7 +50,7 @@
 	/* --------------------------------------------------------------------------
 	   [1] 헤더 영역 (nine-side-menu-head)
 	   -------------------------------------------------------------------------- */
-	nine-side-menu-head {
+	& ::slotted(nine-side-menu-head) {
 		display: flex;
 		align-items: center;
 		padding: 10px;
@@ -84,35 +86,36 @@
 	}
 
 	/* 헤더 상태별 유기적 스위칭 명세 */
-	&.collapse nine-side-menu-head .logo-box {
+	&.collapse ::slotted(nine-side-menu-head) .logo-box {
 		width: 0;
 		justify-content: center;
 		transition: width 0.5s ease-out;
 	}
-	&.collapse.hover nine-side-menu-head .logo-box,
-	&:not(.collapse) nine-side-menu-head .logo-box {
+	&.collapse.hover ::slotted(nine-side-menu-head) .logo-box,
+	&:not(.collapse) ::slotted(nine-side-menu-head) .logo-box {
 		width: 100%;
 		justify-content: space-between;
 	}
 
-	&.collapse nine-side-menu-head .icon:nth-of-type(1) {
+	&.collapse ::slotted(nine-side-menu-head) .icon:nth-of-type(1) {
 		display: block;
 		opacity: 1;
 	}
+
 	&:not(.collapse) {
-		nine-side-menu-head .icon:nth-of-type(1) {
+		::slotted(nine-side-menu-head) .icon:nth-of-type(1) {
 			display: none;
 			opacity: 0;
 		}
-		nine-side-menu-head .icon:nth-of-type(2) {
+		::slotted(nine-side-menu-head) .icon:nth-of-type(2) {
 			display: block;
 			opacity: 1;
 		}
-		nine-side-menu-head .icon:nth-of-type(3) {
+		::slotted(nine-side-menu-head) .icon:nth-of-type(3) {
 			display: none;
 			opacity: 0;
 		}
-		nine-side-menu-head .icon-box:hover {
+		::slotted(nine-side-menu-head) .icon-box:hover {
 			.icon:nth-of-type(2) {
 				display: none;
 				opacity: 0;
@@ -127,7 +130,7 @@
 	/* --------------------------------------------------------------------------
 	   [2] 바디 컨테이너 영역 (nine-side-menu-body)
 	   -------------------------------------------------------------------------- */
-	nine-side-menu-body {
+	& ::slotted(nine-side-menu-body) {
 		display: flex;
 		align-items: center;
 		padding: 10px;
@@ -137,7 +140,7 @@
 	/* --------------------------------------------------------------------------
 	   [3] 푸터 영역 (nine-side-menu-foot)
 	   -------------------------------------------------------------------------- */
-	nine-side-menu-foot {
+	& ::slotted(nine-side-menu-foot) {
 		display: flex;
 		align-items: center;
 		padding: 10px;
@@ -173,35 +176,36 @@
 	}
 
 	/* 푸터 상태별 유기적 스위칭 명세 */
-	&.collapse nine-side-menu-foot .logo-box {
+	&.collapse ::slotted(nine-side-menu-foot) .logo-box {
 		width: 0;
 		justify-content: center;
 		transition: width 0.5s ease-out;
 	}
-	&.collapse.hover nine-side-menu-foot .logo-box,
-	&:not(.collapse) nine-side-menu-foot .logo-box {
+	&.collapse.hover ::slotted(nine-side-menu-foot) .logo-box,
+	&:not(.collapse) ::slotted(nine-side-menu-foot) .logo-box {
 		width: 100%;
 		justify-content: space-between;
 	}
 
-	&.collapse nine-side-menu-foot .icon:nth-of-type(1) {
+	&.collapse ::slotted(nine-side-menu-foot) .icon:nth-of-type(1) {
 		display: block;
 		opacity: 1;
 	}
+
 	&:not(.collapse) {
-		nine-side-menu-foot .icon:nth-of-type(1) {
+		::slotted(nine-side-menu-foot) .icon:nth-of-type(1) {
 			display: none;
 			opacity: 0;
 		}
-		nine-side-menu-foot .icon:nth-of-type(2) {
+		::slotted(nine-side-menu-foot) .icon:nth-of-type(2) {
 			display: block;
 			opacity: 1;
 		}
-		nine-side-menu-foot .icon:nth-of-type(3) {
+		::slotted(nine-side-menu-foot) .icon:nth-of-type(3) {
 			display: none;
 			opacity: 0;
 		}
-		nine-side-menu-foot .icon-box:hover {
+		::slotted(nine-side-menu-foot) .icon-box:hover {
 			.icon:nth-of-type(2) {
 				display: none;
 				opacity: 0;
@@ -216,7 +220,7 @@
 	/* --------------------------------------------------------------------------
 	   [4] 메뉴 아이템 목록 영역 (nine-side-menu-item)
 	   -------------------------------------------------------------------------- */
-	nine-side-menu-item {
+	& ::slotted(nine-side-menu-item) {
 		padding: 0;
 		margin: 0;
 		position: relative;
@@ -341,24 +345,24 @@
 
 	/* 아이템 상태별 축소 명세 */
 	&.collapse:not(.hover) {
-		nine-side-menu-item:not(.group) {
+		::slotted(nine-side-menu-item:not(.group)) {
 			opacity: 0;
 			height: 0;
 		}
-		nine-side-menu-item .menubar {
+		::slotted(nine-side-menu-item) .menubar {
 			width: 0;
 			padding-left: unset;
 			display: none;
 		}
-		nine-side-menu-item li {
+		::slotted(nine-side-menu-item) li {
 			justify-content: center;
 		}
-		nine-side-menu-item .icon {
+		::slotted(nine-side-menu-item) .icon {
 			width: 20px;
 			height: 20px;
 			margin-left: 4px;
 		}
-		nine-side-menu-item .expand-icon {
+		::slotted(nine-side-menu-item) .expand-icon {
 			display: none;
 		}
 	}
@@ -366,7 +370,14 @@
 
 /* ==========================================================================
    [GLOBAL KEYFRAMES]
+   키프레임 애니메이션은 중첩 안쪽에 있으면 동작하지 않으므로 바깥에 둡니다.
    ========================================================================== */
+@keyframes nineMenuBounce {
+	0%, 20%, 50%, 80%, 100% { transform: translateX(0); }
+	40% { transform: translateX(-10px); }
+	60% { left: -10px; transform: translateX(10px); }
+}
+
 @keyframes nineMenuRotateIn {
 	from { transform: rotate(0deg); }
 	to { transform: rotate(180deg); }