@nine-lab/nine-ux 0.1.161 → 0.1.163

package/dist/css/nineMenu.css

@@ -29,6 +29,69 @@
 	}
 
 
+	nine-side-menu-head {
+		display: flex;
+		--align-items: flex-start;
+		align-items: center; /* 수직 중앙 정렬 */
+		padding: 10px; /* 여백 추가 */
+		height: 40px;
+		justify-content: center;
+		--border: 2px solid red;
+
+		.logo-box {
+			color: #f0f0f0;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			text-align: center;
+			width: 100%;
+		}
+
+		.icon-box {
+			display: flex;
+			align-items: center;
+			overflow: hidden;
+
+			svg {
+				display: none;
+				opacity: 0;
+				transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
+			}
+		}
+
+		.icon {
+			fill: var(--icon-color); /* 아이콘 색상 */
+			cursor: pointer;
+			transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
+		}
+	}
+
+	nine-side-menu-body {
+		display: flex;
+		--align-items: flex-start;
+		align-items: center; /* 수직 중앙 정렬 */
+		padding: 10px; /* 여백 추가 */
+		justify-content: center;
+		height: 100%;
+		overflow: auto;
+
+		ul.side-menu-body {
+			width: 100%;
+			padding: 0;
+			margin: 0;
+			display: flex;
+			flex-direction: column;
+			--align-items: center;
+		}
+	}
+
+	nine-side-menu-foot {
+		display: flex;
+		--align-items: flex-start;
+		align-items: center; /* 수직 중앙 정렬 */
+		padding: 10px; /* 여백 추가 */
+		height: 40px;
+	}
 
 }
 
@@ -67,32 +130,8 @@
 
 
 
-:host(nine-side-menu-body) {
-	display: flex;
-	--align-items: flex-start;
-	align-items: center; /* 수직 중앙 정렬 */
-	padding: 10px; /* 여백 추가 */
-	justify-content: center;
-	height: 100%;
-	overflow: auto;
 
-	ul.side-menu-body {
-		width: 100%;
-		padding: 0;
-		margin: 0;
-		display: flex;
-		flex-direction: column;
-		--align-items: center;
-	}
-}
 
-:host(nine-side-menu-foot) {
-	display: flex;
-	--align-items: flex-start;
-	align-items: center; /* 수직 중앙 정렬 */
-	padding: 10px; /* 여백 추가 */
-	height: 40px;
-}
 
 
 :host(nine-side-menu-item) {
@@ -310,89 +349,55 @@
 }
 
 
-
-:host(nine-side-menu-head) {
-	display: flex;
-	--align-items: flex-start;
-	align-items: center; /* 수직 중앙 정렬 */
-	padding: 10px; /* 여백 추가 */
-	height: 40px;
-	justify-content: center;
-	--border: 2px solid red;
-
-
-	.logo-box
-	{
-		color: #f0f0f0;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		text-align: center;
-		width: 100%;
-	}
-
-	.icon-box {
-		display: flex;
-		align-items: center;
-		overflow: hidden;
-	}
-
-	.icon {
-		fill: var(--icon-color); /* 아이콘 색상 */
-		cursor: pointer;
-		transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
-	}
-
-	.icon-box svg {
-		display: none;
-		opacity: 0;
-		transition: opacity 0.3s ease-in-out; /* 부드러운 전환을 위한 애니메이션 */
+/* 💡 부모 상태(collapse)에 따른 헤더 내부 엘리먼트 제어 명세 */
+:host(nine-side-menu.collapse) {
+	nine-side-menu-head {
+		.logo-box {
+			width: 0;
+			transition: width 0.5s ease-out;
+		}
+		.icon:first-child {
+			display: block;
+			opacity: 1;
+		}
 	}
-
-}
-
-/**
-:host(.collapse) .logo-box { justify-content: center; }
-:host(.collapse:hover) .logo-box, .logo-box { justify-content: space-between; }
-*/
-
-
-:host(nine-side-menu-head.collapse) .logo-box {
-	width: 0;
-	transition: width 0.5s ease-out;
-}
-:host(nine-side-menu-head:not(.collapse)) .logo-box, :host(.hover) .logo-box {
-	width: 100%;
-}
-
-:host(nine-side-menu-head.collapse) .icon:first-child {
-	display: block;
-	opacity: 1;
-}
-
-:host(nine-side-menu-head:not(.collapse)) .icon:first-child {
-	display: none;
-	opacity: 0;
 }
 
-:host(nine-side-menu-head:not(.collapse)) .icon:nth-child(2) {
-	display: block;
-	opacity: 1;
-}
-
-:host(nine-side-menu-head:not(.collapse)) .icon:nth-child(3) {
-	display: none;
-	opacity: 0;
-}
-
-:host(nine-side-menu-head:not(.collapse)) .icon-box:hover .icon:nth-child(2) {
-	display: none;
-}
-
-:host(nine-side-menu-head:not(.collapse)) .icon-box:hover .icon:nth-child(3) {
-	display: block;
-	opacity: 1;
+:host(nine-side-menu:not(.collapse)) {
+	/* 💡 부모 상태(not collapse)에 따른 헤더 내부 엘리먼트 제어 명세 */
+	nine-side-menu-head {
+		.logo-box {
+			width: 100%;
+		}
+		.icon:first-child {
+			display: none;
+			opacity: 0;
+		}
+		.icon:nth-child(2) {
+			display: block;
+			opacity: 1;
+		}
+		.icon:nth-child(3) {
+			display: none;
+			opacity: 0;
+		}
+		.icon-box:hover {
+			.icon:nth-child(2) {
+				display: none;
+			}
+			.icon:nth-child(3) {
+				display: block;
+				opacity: 1;
+			}
+		}
+	}
 }
 
-
-
+/* 💡 부모 마우스 오버(.hover) 시 로고 박스 원상 복구 처리 */
+:host(nine-side-menu.hover) {
+	nine-side-menu-head {
+		.logo-box {
+			width: 100%;
+		}
+	}
+}

package/dist/{few_shot-CbH9IU9T.js → few_shot-DpjFZzUl.js}

@@ -1,4 +1,4 @@
-import { B as p, c as n, r as o, P as u } from "./index-XSm_3Q4u.js";
+import { B as p, c as n, r as o, P as u } from "./index-CNacP4Gi.js";
 class l extends p {
   constructor(e) {
     if (super(e), Object.defineProperty(this, "lc_serializable", {