atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/list-item/list-item.css

@@ -22,11 +22,15 @@
   border-width: 0 !important;
 }
 
+:host {
+  display: block;
+  overflow: visible;
+}
+
 .list-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
+  padding: 6px 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   user-select: none;
@@ -36,6 +40,7 @@
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
+  overflow: visible;
 }
 
 .list-item:focus {
@@ -83,24 +88,6 @@
   object-fit: cover;
 }
 
-.list-item-sm .list-item-avatar {
-  width: 32px;
-  height: 32px;
-}
-.list-item-sm .list-item-image {
-  width: 36px;
-  height: 36px;
-}
-
-.list-item-lg .list-item-avatar {
-  width: 48px;
-  height: 48px;
-}
-.list-item-lg .list-item-image {
-  width: 64px;
-  height: 64px;
-}
-
 .skeleton-pulse {
   position: absolute;
   top: 0;
@@ -115,10 +102,12 @@
 
 .skeleton-text {
   height: 0.8em;
-  background: var(--bg-primary, #e2e8f0);
+  background: var(--bg-pressed, #e2e8f0);
   border-radius: 4px;
   width: 80%;
   display: inline-block;
+  position: relative;
+  overflow: hidden;
 }
 .skeleton-text.list-item-sublabel {
   width: 60%;
@@ -126,13 +115,17 @@
 }
 
 .skeleton-circle {
-  background: var(--bg-primary, #e2e8f0);
+  background: var(--bg-pressed, #e2e8f0);
   border-radius: 50%;
+  position: relative;
+  overflow: hidden;
 }
 
 .skeleton-rect {
-  background: var(--bg-primary, #e2e8f0);
+  background: var(--bg-pressed, #e2e8f0);
   border-radius: 8px;
+  position: relative;
+  overflow: hidden;
 }
 
 @keyframes list-skeleton-shimmer {
@@ -162,11 +155,42 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 6px;
   min-width: 0;
   overflow: hidden;
 }
 
+.list-item-subline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.list-item-skeleton-content {
+  align-items: flex-start;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+}
+.list-item-skeleton-content .list-item-label-wrapper,
+.list-item-skeleton-content .list-item-subline {
+  width: 100%;
+  min-width: 0;
+  overflow: visible;
+}
+.list-item-skeleton-content .list-item-label-wrapper {
+  align-items: flex-start;
+}
+.list-item-skeleton-content .list-item-subline {
+  margin-top: 0;
+}
+.list-item-skeleton-content ui-skeleton {
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
 .list-item-label-wrapper {
   display: flex;
   align-items: center;
@@ -228,6 +252,14 @@
   padding: 8px 12px;
   gap: 8px;
 }
+.list-item-sm .list-item-avatar {
+  width: 32px;
+  height: 32px;
+}
+.list-item-sm .list-item-image {
+  width: 36px;
+  height: 36px;
+}
 .list-item-sm .list-item-icon {
   font-size: 1rem;
 }
@@ -237,60 +269,50 @@
 .list-item-sm .list-item-action-icon {
   font-size: 1rem;
 }
-
-.list-item-md {
-  padding: 12px 16px;
-  gap: 12px;
-}
-
-.list-item-lg {
-  padding: 16px 20px;
-  gap: 14px;
+.list-item-sm .list-item-checkbox .checkbox-icon {
+  font-size: 1rem;
 }
-.list-item-lg .list-item-icon {
-  font-size: 1.5rem;
+.list-item-sm .list-item-ghost-layer {
+  top: 6px;
+  right: 6px;
 }
-.list-item-lg .list-item-label {
-  font-size: 1.125rem;
+.list-item-sm .ghost-popover-trigger {
+  width: 18px;
+  height: 18px;
 }
-.list-item-lg .list-item-action-icon {
-  font-size: 1.25rem;
+.list-item-sm .ghost-popover-trigger ui-icon {
+  font-size: 0.625rem;
 }
-
-.list-item-dense {
-  padding: 6px 12px;
-  gap: 8px;
+.list-item-sm .ghost-meta {
+  font-size: 0.5625rem;
 }
-.list-item-dense .list-item-label {
-  font-size: 0.875rem;
+.list-item-sm .list-item-badge {
+  font-size: 0.625rem;
+  padding: 1px 6px;
 }
-
-.list-item-text {
-  background: transparent;
+.list-item-sm .list-item-counter {
+  min-width: 16px;
+  height: 16px;
+  font-size: 0.625rem;
 }
-
-.list-item-text:hover:not(.list-item-disabled):not(.list-item-readonly) {
-  background: rgba(0, 0, 0, 0.04);
+.list-item-sm .pill {
+  padding: 2px 8px;
+  font-size: 0.625rem;
 }
-
-.list-item-filled {
-  background: var(--bg-primary, #ffffff);
-  border: 1px solid var(--border-default, #e5e7eb);
-  margin-bottom: 2px;
-  border-radius: 6px;
+.list-item-sm .tag {
+  padding: 1px 6px;
+  font-size: 0.625rem;
 }
-
-.list-item-filled:hover:not(.list-item-disabled):not(.list-item-readonly) {
-  background: var(--bg-primary, #f9fafb);
-  border-color: var(--border-strong, #d1d5db);
+.list-item-sm .list-item-sublabel {
+  font-size: 0.75rem;
 }
 
 .list-item-filled.list-item-primary {
-  background: rgba(var(--color-success-rgb, 61, 205, 88), 0.05);
-  border-color: rgba(var(--color-success-rgb, 61, 205, 88), 0.2);
+  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.05);
+  border-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
 }
 .list-item-filled.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly) {
-  background: rgba(var(--color-success-rgb, 61, 205, 88), 0.1);
+  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
 }
 
 .list-item-filled.list-item-secondary {
@@ -346,11 +368,11 @@
 }
 
 .list-item-outlined.list-item-primary {
-  border-color: rgba(var(--color-success-rgb, 61, 205, 88), 0.3);
+  border-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
 }
 .list-item-outlined.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly) {
-  background: rgba(var(--color-success-rgb, 61, 205, 88), 0.05);
-  border-color: rgba(var(--color-success-rgb, 61, 205, 88), 0.5);
+  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.05);
+  border-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.5);
 }
 
 .list-item-outlined.list-item-secondary {
@@ -404,10 +426,10 @@
 }
 
 .list-item-soft.list-item-primary {
-  background: rgba(var(--color-success-rgb, 61, 205, 88), 0.08);
+  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.08);
 }
 .list-item-soft.list-item-primary:hover:not(.list-item-disabled):not(.list-item-readonly) {
-  background: rgba(var(--color-success-rgb, 61, 205, 88), 0.12);
+  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.12);
 }
 
 .list-item-soft.list-item-secondary {
@@ -450,7 +472,7 @@
 }
 
 .list-item-primary .list-item-icon {
-  color: var(--color-success, #3dcd58);
+  color: var(--color-primary, #3b82f6);
 }
 
 .list-item-secondary .list-item-icon {
@@ -474,11 +496,11 @@
 }
 
 .list-item-text.list-item-selected.list-item-primary {
-  background: rgba(var(--color-success-rgb, 61, 205, 88), 0.08);
+  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.08);
 }
 .list-item-text.list-item-selected.list-item-primary .list-item-icon,
 .list-item-text.list-item-selected.list-item-primary .list-item-label {
-  color: var(--color-success, #3dcd58);
+  color: var(--color-primary, #3b82f6);
   font-weight: 600;
 }
 
@@ -528,19 +550,19 @@
 }
 
 .list-item-text.list-item-selected.list-item-default {
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--bg-selected, rgba(107, 114, 128, 0.15));
 }
 .list-item-text.list-item-selected.list-item-default .list-item-label {
   font-weight: 600;
 }
 
 .list-item-filled.list-item-selected.list-item-primary {
-  background: var(--bg-primary, #d1fae5);
-  border-color: var(--color-success, #3dcd58);
+  background: var(--bg-selected, var(--color-primary-subtle, rgba(59, 130, 246, 0.12)));
+  border-color: var(--color-primary, #3b82f6);
 }
 .list-item-filled.list-item-selected.list-item-primary .list-item-icon,
 .list-item-filled.list-item-selected.list-item-primary .list-item-label {
-  color: var(--color-success, #009B4E);
+  color: var(--color-primary, #3b82f6);
   font-weight: 600;
 }
 
@@ -565,12 +587,12 @@
 }
 
 .list-item-outlined.list-item-selected.list-item-primary {
-  border-color: var(--color-success, #3dcd58);
+  border-color: var(--color-primary, #3b82f6);
   border-width: 2px;
 }
 .list-item-outlined.list-item-selected.list-item-primary .list-item-icon,
 .list-item-outlined.list-item-selected.list-item-primary .list-item-label {
-  color: var(--color-success, #3dcd58);
+  color: var(--color-primary, #3b82f6);
   font-weight: 600;
 }
 
@@ -585,11 +607,11 @@
 }
 
 .list-item-soft.list-item-selected.list-item-primary {
-  background: rgba(var(--color-success-rgb, 61, 205, 88), 0.12);
+  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.12);
 }
 .list-item-soft.list-item-selected.list-item-primary .list-item-icon,
 .list-item-soft.list-item-selected.list-item-primary .list-item-label {
-  color: var(--color-success, #009B4E);
+  color: var(--color-primary, #3b82f6);
   font-weight: 600;
 }
 
@@ -645,7 +667,15 @@
 .list-item-children {
   display: flex;
   flex-direction: column;
-  animation: slideDown 0.2s ease;
+  overflow: hidden;
+  max-height: 2000px;
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+  opacity: 1;
+}
+.list-item-children.is-collapsed {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
 }
 
 @keyframes slideDown {
@@ -663,8 +693,8 @@
 }
 
 .list-item-hovered:not(.list-item-disabled):not(.list-item-readonly) {
-  transform: translateX(2px);
   border-radius: 8px;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
 }
 
 .list-item-context-menu {
@@ -818,6 +848,30 @@
   margin-left: auto;
   flex-shrink: 0;
 }
+.list-item-counter.counter-primary {
+  background: var(--color-primary, #10b981);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-secondary {
+  background: var(--text-muted, #6b7280);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-success {
+  background: var(--color-success, #3dcd58);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-danger {
+  background: var(--color-danger, #ef4444);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-warning {
+  background: var(--color-warning, #f59e0b);
+  color: var(--text-standard, #ffffff);
+}
+.list-item-counter.counter-info {
+  background: var(--color-info, #06b6d4);
+  color: var(--text-standard, #ffffff);
+}
 
 .list-item-right {
   display: flex;
@@ -961,33 +1015,44 @@
   transform: scale(0.95);
 }
 
-.list-item-sm .list-item-checkbox .checkbox-icon {
-  font-size: 1rem;
+.list-item-lg {
+  padding: 16px 20px;
+  gap: 14px;
 }
-.list-item-sm .list-item-badge {
-  font-size: 0.625rem;
-  padding: 1px 6px;
+.list-item-lg .list-item-avatar {
+  width: 48px;
+  height: 48px;
 }
-.list-item-sm .list-item-counter {
-  min-width: 16px;
-  height: 16px;
-  font-size: 0.625rem;
+.list-item-lg .list-item-image {
+  width: 64px;
+  height: 64px;
 }
-.list-item-sm .pill {
-  padding: 2px 8px;
-  font-size: 0.625rem;
+.list-item-lg .list-item-icon {
+  font-size: 1.5rem;
 }
-.list-item-sm .tag {
-  padding: 1px 6px;
-  font-size: 0.625rem;
+.list-item-lg .list-item-label {
+  font-size: 1.125rem;
 }
-.list-item-sm .list-item-sublabel {
-  font-size: 0.75rem;
+.list-item-lg .list-item-action-icon {
+  font-size: 1.25rem;
 }
-
 .list-item-lg .list-item-checkbox .checkbox-icon {
   font-size: 1.5rem;
 }
+.list-item-lg .list-item-ghost-layer {
+  top: 10px;
+  right: 10px;
+}
+.list-item-lg .ghost-popover-trigger {
+  width: 24px;
+  height: 24px;
+}
+.list-item-lg .ghost-popover-trigger ui-icon {
+  font-size: 0.8125rem;
+}
+.list-item-lg .ghost-meta {
+  font-size: 0.6875rem;
+}
 .list-item-lg .list-item-badge {
   font-size: 0.875rem;
   padding: 3px 10px;
@@ -1009,12 +1074,48 @@
   font-size: 1rem;
 }
 
+.list-item-md {
+  padding: 12px 16px;
+  gap: 12px;
+}
+
+.list-item-dense {
+  padding: 6px 12px;
+  gap: 8px;
+}
+.list-item-dense .list-item-label {
+  font-size: 0.875rem;
+}
+
+.list-item-text {
+  background: transparent;
+}
+
+.list-item-text:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.list-item-filled {
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-default, #e5e7eb);
+  margin-bottom: 2px;
+  border-radius: 6px;
+}
+
+.list-item-filled:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: var(--bg-primary, #f9fafb);
+  border-color: var(--border-strong, #d1d5db);
+}
+
 .list-item-left-media {
   display: flex;
   align-items: center;
   gap: inherit;
   flex-shrink: 0;
 }
+.list-item-left-media ui-skeleton {
+  flex-shrink: 0;
+}
 
 .list-item-right-media {
   display: flex;
@@ -1023,6 +1124,9 @@
   flex-shrink: 0;
   margin-left: 12px;
 }
+.list-item-right-media ui-skeleton {
+  flex-shrink: 0;
+}
 
 .list-item-avatar-right .list-item-counter,
 .list-item-avatar-right .list-item-action-icon,
@@ -1033,85 +1137,87 @@
   margin-left: auto;
 }
 
-.list-item.list-item-selection-primary.list-item-selected {
+:host .list-item.list-item-selection-primary.list-item-selected {
   background: rgba(var(--color-success-rgb, 61, 205, 88), 0.12) !important;
   border-color: var(--color-success, #3dcd58) !important;
 }
-.list-item.list-item-selection-primary.list-item-selected .list-item-label {
+:host .list-item.list-item-selection-primary.list-item-selected .list-item-label {
   color: var(--color-success, #009B4E) !important;
 }
-.list-item.list-item-selection-primary.list-item-selected .list-item-icon {
+:host .list-item.list-item-selection-primary.list-item-selected .list-item-icon {
   color: var(--color-success, #009B4E) !important;
 }
-.list-item.list-item-selection-secondary.list-item-selected {
+:host .list-item.list-item-selection-secondary.list-item-selected {
   background: rgba(107, 114, 128, 0.12) !important;
   border-color: var(--color-primary, #6b7280) !important;
 }
-.list-item.list-item-selection-secondary.list-item-selected .list-item-label {
+:host .list-item.list-item-selection-secondary.list-item-selected .list-item-label {
   color: var(--color-primary, #4b5563) !important;
 }
-.list-item.list-item-selection-secondary.list-item-selected .list-item-icon {
+:host .list-item.list-item-selection-secondary.list-item-selected .list-item-icon {
   color: var(--color-primary, #4b5563) !important;
 }
-.list-item.list-item-selection-success.list-item-selected {
+:host .list-item.list-item-selection-success.list-item-selected {
   background: rgba(22, 163, 74, 0.12) !important;
   border-color: var(--color-success, #16a34a) !important;
 }
-.list-item.list-item-selection-success.list-item-selected .list-item-label {
+:host .list-item.list-item-selection-success.list-item-selected .list-item-label {
   color: var(--color-success, #15803d) !important;
 }
-.list-item.list-item-selection-success.list-item-selected .list-item-icon {
+:host .list-item.list-item-selection-success.list-item-selected .list-item-icon {
   color: var(--color-success, #15803d) !important;
 }
-.list-item.list-item-selection-danger.list-item-selected {
+:host .list-item.list-item-selection-danger.list-item-selected {
   background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.12) !important;
   border-color: var(--color-danger-hover, #dc2626) !important;
 }
-.list-item.list-item-selection-danger.list-item-selected .list-item-label {
+:host .list-item.list-item-selection-danger.list-item-selected .list-item-label {
   color: var(--color-danger, #991b1b) !important;
 }
-.list-item.list-item-selection-danger.list-item-selected .list-item-icon {
+:host .list-item.list-item-selection-danger.list-item-selected .list-item-icon {
   color: var(--color-danger, #991b1b) !important;
 }
-.list-item.list-item-selection-warning.list-item-selected {
+:host .list-item.list-item-selection-warning.list-item-selected {
   background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.12) !important;
   border-color: var(--color-warning, #f59e0b) !important;
 }
-.list-item.list-item-selection-warning.list-item-selected .list-item-label {
+:host .list-item.list-item-selection-warning.list-item-selected .list-item-label {
   color: var(--color-danger, #92400e) !important;
 }
-.list-item.list-item-selection-warning.list-item-selected .list-item-icon {
+:host .list-item.list-item-selection-warning.list-item-selected .list-item-icon {
   color: var(--color-danger, #92400e) !important;
 }
-.list-item.list-item-selection-info.list-item-selected {
+:host .list-item.list-item-selection-info.list-item-selected {
   background: rgba(8, 145, 178, 0.12) !important;
   border-color: var(--color-info-hover, #0891b2) !important;
 }
-.list-item.list-item-selection-info.list-item-selected .list-item-label {
+:host .list-item.list-item-selection-info.list-item-selected .list-item-label {
   color: var(--color-primary, #075985) !important;
 }
-.list-item.list-item-selection-info.list-item-selected .list-item-icon {
+:host .list-item.list-item-selection-info.list-item-selected .list-item-icon {
   color: var(--color-primary, #075985) !important;
 }
-
-.list-item.list-item-hover-primary:hover:not(.list-item-selected):not(.list-item-disabled) {
+:host .list-item.list-item-hover-primary:hover:not(.list-item-selected):not(.list-item-disabled) {
   background: rgba(var(--color-success-rgb, 61, 205, 88), 0.05) !important;
 }
-.list-item.list-item-hover-secondary:hover:not(.list-item-selected):not(.list-item-disabled) {
+:host .list-item.list-item-hover-secondary:hover:not(.list-item-selected):not(.list-item-disabled) {
   background: rgba(107, 114, 128, 0.05) !important;
 }
-.list-item.list-item-hover-success:hover:not(.list-item-selected):not(.list-item-disabled) {
+:host .list-item.list-item-hover-success:hover:not(.list-item-selected):not(.list-item-disabled) {
   background: rgba(22, 163, 74, 0.05) !important;
 }
-.list-item.list-item-hover-danger:hover:not(.list-item-selected):not(.list-item-disabled) {
+:host .list-item.list-item-hover-danger:hover:not(.list-item-selected):not(.list-item-disabled) {
   background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.05) !important;
 }
-.list-item.list-item-hover-warning:hover:not(.list-item-selected):not(.list-item-disabled) {
+:host .list-item.list-item-hover-warning:hover:not(.list-item-selected):not(.list-item-disabled) {
   background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.05) !important;
 }
-.list-item.list-item-hover-info:hover:not(.list-item-selected):not(.list-item-disabled) {
+:host .list-item.list-item-hover-info:hover:not(.list-item-selected):not(.list-item-disabled) {
   background: rgba(8, 145, 178, 0.05) !important;
 }
+:host .list-item[style*=transform] {
+  transition: transform 0.1s ease-out;
+}
 
 .list-item-lock-icon {
   font-size: 0.875rem;
@@ -1208,10 +1314,6 @@
   background-color: var(--color-success, #3dcd58);
 }
 
-.list-item[style*=transform] {
-  transition: transform 0.1s ease-out;
-}
-
 .list-item-grid {
   flex-direction: column !important;
   align-items: center !important;
@@ -1248,6 +1350,7 @@
 
 .list-item-tree-lines {
   position: relative;
+  --list-item-tree-line-color: var(--text-muted, #6b7280);
 }
 .list-item-tree-lines::before {
   content: "";
@@ -1256,7 +1359,7 @@
   top: -12px;
   bottom: 50%;
   width: 2px;
-  background: var(--color-primary, #cbd5e1);
+  background: var(--list-item-tree-line-color);
 }
 .list-item-tree-lines::after {
   content: "";
@@ -1265,7 +1368,7 @@
   top: 50%;
   width: 16px;
   height: 2px;
-  background: var(--color-primary, #cbd5e1);
+  background: var(--list-item-tree-line-color);
   border-radius: 0 2px 2px 0;
 }
 
@@ -1444,6 +1547,103 @@
     box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0);
   }
 }
+.list-item-ghost-layer {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 6;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition: opacity 0.18s ease, transform 0.18s ease, z-index 0s;
+}
+.list-item-ghost-layer:hover, .list-item-ghost-layer:focus-within {
+  z-index: 100;
+}
+
+.list-item-ghost-layer ui-popover {
+  --ghost-popover-bg: var(--bg-primary, #ffffff);
+  --ghost-popover-surface-bg: var(--bg-primary, #ffffff);
+  --ghost-popover-header-bg: var(--bg-primary, #ffffff);
+  --ghost-popover-body-bg: var(--bg-primary, #ffffff);
+  --ghost-popover-border: var(--border-default, #e5e7eb);
+  --ghost-popover-text-primary: var(--text-primary, #0f172a);
+  --ghost-popover-text-secondary: var(--text-secondary, #475569);
+  --ghost-popover-footer-bg: var(--bg-secondary, #f8fafc);
+}
+
+.ghost-popover-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid rgba(148, 163, 184, 0.3);
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.88);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
+  color: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(8px);
+  cursor: pointer;
+  opacity: 1;
+  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.ghost-popover-trigger:hover, .ghost-popover-trigger:focus-visible {
+  background: rgba(15, 23, 42, 0.96);
+  border-color: rgba(191, 219, 254, 0.56);
+  transform: translateY(-1px);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.34);
+  outline: none;
+}
+.ghost-popover-trigger ui-icon {
+  font-size: 0.8125rem;
+  pointer-events: none;
+}
+
+.ghost-popover-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  min-width: 280px;
+  max-width: min(320px, 100vw - 32px);
+}
+
+.ghost-meta {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.ghost-meta-label {
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-secondary, #475569);
+}
+
+.ghost-meta-value {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-primary, #0f172a);
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.ghost-popover-content .ghost-meta + .ghost-meta {
+  padding-top: 8px;
+  border-top: 1px solid var(--border-default, rgba(148, 163, 184, 0.18));
+}
+
 .presence-halo {
   position: absolute;
   top: 6px;
@@ -1466,6 +1666,17 @@
   padding-bottom: 4px !important;
   min-height: 40px;
 }
+.list-item-density-compact .list-item-ghost-layer {
+  top: 5px;
+  right: 5px;
+}
+.list-item-density-compact .ghost-popover-trigger {
+  width: 16px;
+  height: 16px;
+}
+.list-item-density-compact .ghost-popover-trigger ui-icon {
+  font-size: 0.5625rem;
+}
 .list-item-density-compact .list-item-sublabel,
 .list-item-density-compact .list-item-tags,
 .list-item-density-compact .list-item-progress-container {
@@ -1488,4 +1699,89 @@
 .list-item-density-cozy .list-item-avatar-container,
 .list-item-density-cozy ui-avatar {
   transform: scale(1.15);
+}
+
+.list-item-context-menu-container {
+  position: fixed;
+  z-index: 100000;
+  min-width: 180px;
+  background: var(--bg-tertiary, rgba(15, 23, 42, 0.95));
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
+  border-radius: 12px;
+  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
+  padding: 6px;
+  animation: contextMenuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+@keyframes contextMenuFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+.context-menu-default {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+}
+
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+.context-menu-item ui-icon {
+  font-size: 1rem;
+  color: var(--text-muted, rgba(255, 255, 255, 0.5));
+  transition: color 0.15s ease;
+}
+.context-menu-item span {
+  color: inherit;
+}
+.context-menu-item:hover {
+  background: var(--bg-hover, rgba(255, 255, 255, 0.08));
+  color: var(--text-primary, #ffffff);
+}
+.context-menu-item:hover ui-icon {
+  color: var(--text-primary, #ffffff);
+  transform: scale(1.05);
+}
+.context-menu-item:active {
+  transform: scale(0.98);
+}
+.context-menu-item.danger {
+  color: var(--color-danger, #fca5a5);
+}
+.context-menu-item.danger ui-icon {
+  color: var(--color-danger, #ef4444);
+}
+.context-menu-item.danger:hover {
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--color-danger, #ef4444);
+}
+.context-menu-item.danger:hover ui-icon {
+  color: var(--color-danger, #ef4444);
+}
+
+.context-menu-divider {
+  height: 1px;
+  background: var(--border-default, rgba(255, 255, 255, 0.08));
+  margin: 4px 6px;
 }