atomicuilibrary 0.0.1

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

@@ -0,0 +1,1491 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+  outline: none;
+  position: relative;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.list-item:focus {
+  outline: 2px solid rgba(var(--color-primary-rgb, 59, 130, 246), 0.5);
+  outline-offset: -2px;
+}
+
+.collapse-icon {
+  font-size: 0.75rem;
+  transition: transform 0.2s ease;
+  color: var(--text-muted, #6b7280);
+}
+
+.list-item-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.list-item-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--bg-secondary, #f1f5f9);
+}
+.list-item-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.list-item-image {
+  width: 48px;
+  height: 48px;
+  border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--bg-secondary, #f1f5f9);
+}
+.list-item-image img {
+  width: 100%;
+  height: 100%;
+  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;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  animation: list-skeleton-shimmer 1.5s infinite;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.skeleton-text {
+  height: 0.8em;
+  background: var(--bg-primary, #e2e8f0);
+  border-radius: 4px;
+  width: 80%;
+  display: inline-block;
+}
+.skeleton-text.list-item-sublabel {
+  width: 60%;
+  margin-top: 4px;
+}
+
+.skeleton-circle {
+  background: var(--bg-primary, #e2e8f0);
+  border-radius: 50%;
+}
+
+.skeleton-rect {
+  background: var(--bg-primary, #e2e8f0);
+  border-radius: 8px;
+}
+
+@keyframes list-skeleton-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+.is-skeleton {
+  pointer-events: none;
+  background: transparent !important;
+  border-color: var(--border-subtle, #f1f5f9) !important;
+  transform: none !important;
+}
+
+.list-item-highlight {
+  background: var(--bg-primary, #dcfce7);
+  color: var(--color-success, #166534);
+  padding: 0 2px;
+  border-radius: 2px;
+  font-weight: 700;
+}
+
+.list-item-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.list-item-label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.list-item-label {
+  font-size: 1rem;
+  color: var(--text-secondary, #374151);
+  transition: color 0.2s ease;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-item-sublabel {
+  font-size: 0.875rem;
+  color: var(--text-muted, #6b7280);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.list-item-multiline .list-item-content {
+  padding: 4px 0;
+}
+.list-item-multiline .list-item-label {
+  white-space: normal;
+  line-height: 1.5;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+.list-item-multiline .list-item-sublabel {
+  white-space: normal;
+  line-height: 1.5;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.list-item-action-icon {
+  font-size: 1.125rem;
+  flex-shrink: 0;
+  padding: 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+.list-item-action-icon:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.list-item-action-icon:active {
+  transform: scale(0.95);
+}
+
+.list-item-sm {
+  padding: 8px 12px;
+  gap: 8px;
+}
+.list-item-sm .list-item-icon {
+  font-size: 1rem;
+}
+.list-item-sm .list-item-label {
+  font-size: 0.875rem;
+}
+.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-lg .list-item-icon {
+  font-size: 1.5rem;
+}
+.list-item-lg .list-item-label {
+  font-size: 1.125rem;
+}
+.list-item-lg .list-item-action-icon {
+  font-size: 1.25rem;
+}
+
+.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-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);
+}
+.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);
+}
+
+.list-item-filled.list-item-secondary {
+  background: rgba(107, 114, 128, 0.05);
+  border-color: rgba(107, 114, 128, 0.2);
+}
+.list-item-filled.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(107, 114, 128, 0.1);
+}
+
+.list-item-filled.list-item-success {
+  background: rgba(22, 163, 74, 0.05);
+  border-color: rgba(22, 163, 74, 0.2);
+}
+.list-item-filled.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(22, 163, 74, 0.1);
+}
+
+.list-item-filled.list-item-danger {
+  background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.05);
+  border-color: rgba(var(--color-danger-rgb, 220, 38, 38), 0.2);
+}
+.list-item-filled.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.1);
+}
+
+.list-item-filled.list-item-warning {
+  background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.05);
+  border-color: rgba(var(--color-warning-rgb, 245, 158, 11), 0.2);
+}
+.list-item-filled.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.1);
+}
+
+.list-item-filled.list-item-info {
+  background: rgba(8, 145, 178, 0.05);
+  border-color: rgba(8, 145, 178, 0.2);
+}
+.list-item-filled.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(8, 145, 178, 0.1);
+}
+
+.list-item-outlined {
+  background: transparent;
+  border: 1px solid var(--border-default, #e5e7eb);
+  margin-bottom: 2px;
+  border-radius: 6px;
+}
+
+.list-item-outlined:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: var(--border-strong, #d1d5db);
+}
+
+.list-item-outlined.list-item-primary {
+  border-color: rgba(var(--color-success-rgb, 61, 205, 88), 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);
+}
+
+.list-item-outlined.list-item-secondary {
+  border-color: rgba(107, 114, 128, 0.3);
+}
+.list-item-outlined.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(107, 114, 128, 0.05);
+  border-color: rgba(107, 114, 128, 0.5);
+}
+
+.list-item-outlined.list-item-success {
+  border-color: rgba(22, 163, 74, 0.3);
+}
+.list-item-outlined.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(22, 163, 74, 0.05);
+  border-color: rgba(22, 163, 74, 0.5);
+}
+
+.list-item-outlined.list-item-danger {
+  border-color: rgba(var(--color-danger-rgb, 220, 38, 38), 0.3);
+}
+.list-item-outlined.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.05);
+  border-color: rgba(var(--color-danger-rgb, 220, 38, 38), 0.5);
+}
+
+.list-item-outlined.list-item-warning {
+  border-color: rgba(var(--color-warning-rgb, 245, 158, 11), 0.3);
+}
+.list-item-outlined.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.05);
+  border-color: rgba(var(--color-warning-rgb, 245, 158, 11), 0.5);
+}
+
+.list-item-outlined.list-item-info {
+  border-color: rgba(8, 145, 178, 0.3);
+}
+.list-item-outlined.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(8, 145, 178, 0.05);
+  border-color: rgba(8, 145, 178, 0.5);
+}
+
+.list-item-soft {
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 6px;
+  margin-bottom: 2px;
+}
+
+.list-item-soft:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.list-item-soft.list-item-primary {
+  background: rgba(var(--color-success-rgb, 61, 205, 88), 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);
+}
+
+.list-item-soft.list-item-secondary {
+  background: rgba(107, 114, 128, 0.08);
+}
+.list-item-soft.list-item-secondary:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(107, 114, 128, 0.12);
+}
+
+.list-item-soft.list-item-success {
+  background: rgba(22, 163, 74, 0.08);
+}
+.list-item-soft.list-item-success:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(22, 163, 74, 0.12);
+}
+
+.list-item-soft.list-item-danger {
+  background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.08);
+}
+.list-item-soft.list-item-danger:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.12);
+}
+
+.list-item-soft.list-item-warning {
+  background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.08);
+}
+.list-item-soft.list-item-warning:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.12);
+}
+
+.list-item-soft.list-item-info {
+  background: rgba(8, 145, 178, 0.08);
+}
+.list-item-soft.list-item-info:hover:not(.list-item-disabled):not(.list-item-readonly) {
+  background: rgba(8, 145, 178, 0.12);
+}
+
+.list-item-default .list-item-icon {
+  color: var(--text-muted, #6b7280);
+}
+
+.list-item-primary .list-item-icon {
+  color: var(--color-success, #3dcd58);
+}
+
+.list-item-secondary .list-item-icon {
+  color: var(--text-muted, #6b7280);
+}
+
+.list-item-success .list-item-icon {
+  color: var(--color-success, #16a34a);
+}
+
+.list-item-danger .list-item-icon {
+  color: var(--color-danger-hover, #dc2626);
+}
+
+.list-item-warning .list-item-icon {
+  color: var(--color-warning, #f59e0b);
+}
+
+.list-item-info .list-item-icon {
+  color: var(--color-info-hover, #0891b2);
+}
+
+.list-item-text.list-item-selected.list-item-primary {
+  background: rgba(var(--color-success-rgb, 61, 205, 88), 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);
+  font-weight: 600;
+}
+
+.list-item-text.list-item-selected.list-item-secondary {
+  background: rgba(107, 114, 128, 0.08);
+}
+.list-item-text.list-item-selected.list-item-secondary .list-item-icon,
+.list-item-text.list-item-selected.list-item-secondary .list-item-label {
+  color: var(--text-secondary, #4b5563);
+  font-weight: 600;
+}
+
+.list-item-text.list-item-selected.list-item-success {
+  background: rgba(22, 163, 74, 0.08);
+}
+.list-item-text.list-item-selected.list-item-success .list-item-icon,
+.list-item-text.list-item-selected.list-item-success .list-item-label {
+  color: var(--color-success, #16a34a);
+  font-weight: 600;
+}
+
+.list-item-text.list-item-selected.list-item-danger {
+  background: rgba(var(--color-danger-rgb, 220, 38, 38), 0.08);
+}
+.list-item-text.list-item-selected.list-item-danger .list-item-icon,
+.list-item-text.list-item-selected.list-item-danger .list-item-label {
+  color: var(--color-danger-hover, #dc2626);
+  font-weight: 600;
+}
+
+.list-item-text.list-item-selected.list-item-warning {
+  background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.08);
+}
+.list-item-text.list-item-selected.list-item-warning .list-item-icon,
+.list-item-text.list-item-selected.list-item-warning .list-item-label {
+  color: var(--color-warning-hover, #d97706);
+  font-weight: 600;
+}
+
+.list-item-text.list-item-selected.list-item-info {
+  background: rgba(8, 145, 178, 0.08);
+}
+.list-item-text.list-item-selected.list-item-info .list-item-icon,
+.list-item-text.list-item-selected.list-item-info .list-item-label {
+  color: var(--color-info-hover, #0891b2);
+  font-weight: 600;
+}
+
+.list-item-text.list-item-selected.list-item-default {
+  background: rgba(0, 0, 0, 0.05);
+}
+.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);
+}
+.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);
+  font-weight: 600;
+}
+
+.list-item-filled.list-item-selected.list-item-success {
+  background: var(--bg-primary, #dcfce7);
+  border-color: var(--color-success, #16a34a);
+}
+.list-item-filled.list-item-selected.list-item-success .list-item-icon,
+.list-item-filled.list-item-selected.list-item-success .list-item-label {
+  color: var(--color-success, #166534);
+  font-weight: 600;
+}
+
+.list-item-filled.list-item-selected.list-item-danger {
+  background: var(--bg-primary, #fee2e2);
+  border-color: var(--color-danger-hover, #dc2626);
+}
+.list-item-filled.list-item-selected.list-item-danger .list-item-icon,
+.list-item-filled.list-item-selected.list-item-danger .list-item-label {
+  color: var(--color-danger, #991b1b);
+  font-weight: 600;
+}
+
+.list-item-outlined.list-item-selected.list-item-primary {
+  border-color: var(--color-success, #3dcd58);
+  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);
+  font-weight: 600;
+}
+
+.list-item-outlined.list-item-selected.list-item-success {
+  border-color: var(--color-success, #16a34a);
+  border-width: 2px;
+}
+.list-item-outlined.list-item-selected.list-item-success .list-item-icon,
+.list-item-outlined.list-item-selected.list-item-success .list-item-label {
+  color: var(--color-success, #16a34a);
+  font-weight: 600;
+}
+
+.list-item-soft.list-item-selected.list-item-primary {
+  background: rgba(var(--color-success-rgb, 61, 205, 88), 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);
+  font-weight: 600;
+}
+
+.list-item-selected {
+  border-radius: 8px;
+}
+
+.list-item-soft.list-item-selected.list-item-success {
+  background: rgba(22, 163, 74, 0.12);
+  border-radius: 8px;
+}
+.list-item-soft.list-item-selected.list-item-success .list-item-icon,
+.list-item-soft.list-item-selected.list-item-success .list-item-label {
+  color: var(--color-success, #15803d);
+  font-weight: 600;
+}
+
+.list-item-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.list-item-readonly {
+  cursor: default;
+}
+
+.list-item-divider::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--bg-primary, #e5e7eb);
+}
+
+.list-item-link .list-item-label {
+  text-decoration: none;
+}
+.list-item-link:hover .list-item-label {
+  text-decoration: underline;
+}
+
+.list-item-interactive {
+  cursor: pointer;
+}
+
+.list-item:not(.list-item-interactive) {
+  cursor: default;
+}
+
+.list-item-children {
+  display: flex;
+  flex-direction: column;
+  animation: slideDown 0.2s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 500px;
+  }
+}
+.list-item-focused {
+  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
+}
+
+.list-item-hovered:not(.list-item-disabled):not(.list-item-readonly) {
+  transform: translateX(2px);
+  border-radius: 8px;
+}
+
+.list-item-context-menu {
+  position: relative;
+}
+.list-item-context-menu .list-item-context-icon {
+  font-size: 0.875rem;
+  color: var(--text-muted, #9ca3af);
+  margin-left: auto;
+  transition: transform 0.2s ease;
+}
+.list-item-context-menu.list-item-context-menu-open .list-item-context-icon {
+  transform: rotate(90deg);
+}
+.list-item-context-menu:hover .list-item-context-icon {
+  color: var(--text-muted, #6b7280);
+}
+
+.context-menu {
+  min-width: 200px;
+  background: var(--bg-primary, #ffffff);
+  border-radius: 8px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  padding: 8px 0;
+  animation: contextMenuFadeIn 0.15s ease-out;
+  overflow: hidden;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.context-menu ::slotted(ui-list-item) {
+  margin: 0;
+  border-radius: 0;
+}
+.context-menu::-webkit-scrollbar {
+  width: 6px;
+}
+.context-menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+.context-menu::-webkit-scrollbar-thumb {
+  background: var(--bg-secondary, #d1d5db);
+  border-radius: 3px;
+}
+.context-menu::-webkit-scrollbar-thumb:hover {
+  background: var(--color-primary, #9ca3af);
+}
+
+@keyframes contextMenuFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.context-menu-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9998;
+  background: transparent;
+}
+
+.list-item-checkbox {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-right: 4px;
+}
+.list-item-checkbox input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.list-item-checkbox .checkbox-icon {
+  font-size: 1.25rem;
+  color: var(--text-muted, #9ca3af);
+  transition: all 0.2s ease;
+}
+.list-item-checkbox:hover .checkbox-icon {
+  color: var(--text-muted, #6b7280);
+}
+
+.list-item-checked .checkbox-icon {
+  color: var(--color-success, #3dcd58) !important;
+}
+
+.list-item-disabled .list-item-checkbox,
+.list-item-readonly .list-item-checkbox {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.list-item-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+.list-item-badge.badge-default {
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-secondary, #374151);
+}
+.list-item-badge.badge-primary {
+  background: var(--bg-primary, #d1fae5);
+  color: var(--color-success, #009B4E);
+}
+.list-item-badge.badge-secondary {
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-secondary, #4b5563);
+}
+.list-item-badge.badge-success {
+  background: var(--bg-primary, #d1fae5);
+  color: var(--color-primary, #065f46);
+}
+.list-item-badge.badge-danger {
+  background: var(--bg-primary, #fee2e2);
+  color: var(--color-danger, #991b1b);
+}
+.list-item-badge.badge-warning {
+  background: var(--bg-primary, #fef3c7);
+  color: var(--color-danger, #92400e);
+}
+.list-item-badge.badge-info {
+  background: var(--bg-primary, #e0f2fe);
+  color: var(--color-primary, #075985);
+}
+
+.list-item-counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  background: var(--color-success, #3dcd58);
+  color: var(--text-standard, #ffffff);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.list-item-right {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 6px;
+  margin-left: auto;
+  flex-shrink: 0;
+  max-width: 50%;
+  overflow: hidden;
+}
+
+.list-item-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+.list-item-pills::-webkit-scrollbar {
+  height: 4px;
+}
+.list-item-pills::-webkit-scrollbar-thumb {
+  background: var(--bg-secondary, #d1d5db);
+  border-radius: 2px;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 16px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.pill i {
+  font-size: 0.75rem;
+}
+.pill:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.pill:active {
+  transform: translateY(0);
+}
+.pill.pill-default {
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-secondary, #374151);
+}
+.pill.pill-default:hover {
+  background: var(--bg-primary, #e5e7eb);
+}
+.pill.pill-primary {
+  background: var(--bg-primary, #d1fae5);
+  color: var(--color-success, #009B4E);
+}
+.pill.pill-primary:hover {
+  background: var(--color-success, #a7f3d0);
+}
+.pill.pill-secondary {
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-secondary, #4b5563);
+}
+.pill.pill-secondary:hover {
+  background: var(--bg-primary, #e5e7eb);
+}
+.pill.pill-success {
+  background: var(--bg-primary, #d1fae5);
+  color: var(--color-primary, #065f46);
+}
+.pill.pill-success:hover {
+  background: var(--color-success, #a7f3d0);
+}
+.pill.pill-danger {
+  background: var(--bg-primary, #fee2e2);
+  color: var(--color-danger, #991b1b);
+}
+.pill.pill-danger:hover {
+  background: var(--color-danger, #fecaca);
+}
+.pill.pill-warning {
+  background: var(--bg-primary, #fef3c7);
+  color: var(--color-danger, #92400e);
+}
+.pill.pill-warning:hover {
+  background: var(--color-primary, #fde68a);
+}
+.pill.pill-info {
+  background: var(--bg-primary, #e0f2fe);
+  color: var(--color-primary, #075985);
+}
+.pill.pill-info:hover {
+  background: var(--color-primary, #bae6fd);
+}
+
+.list-item-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+.list-item-tags::-webkit-scrollbar {
+  height: 4px;
+}
+.list-item-tags::-webkit-scrollbar-thumb {
+  background: var(--bg-secondary, #d1d5db);
+  border-radius: 2px;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-muted, #6b7280);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.tag:hover {
+  background: var(--bg-primary, #e5e7eb);
+  color: var(--text-secondary, #374151);
+}
+.tag:active {
+  transform: scale(0.95);
+}
+
+.list-item-sm .list-item-checkbox .checkbox-icon {
+  font-size: 1rem;
+}
+.list-item-sm .list-item-badge {
+  font-size: 0.625rem;
+  padding: 1px 6px;
+}
+.list-item-sm .list-item-counter {
+  min-width: 16px;
+  height: 16px;
+  font-size: 0.625rem;
+}
+.list-item-sm .pill {
+  padding: 2px 8px;
+  font-size: 0.625rem;
+}
+.list-item-sm .tag {
+  padding: 1px 6px;
+  font-size: 0.625rem;
+}
+.list-item-sm .list-item-sublabel {
+  font-size: 0.75rem;
+}
+
+.list-item-lg .list-item-checkbox .checkbox-icon {
+  font-size: 1.5rem;
+}
+.list-item-lg .list-item-badge {
+  font-size: 0.875rem;
+  padding: 3px 10px;
+}
+.list-item-lg .list-item-counter {
+  min-width: 24px;
+  height: 24px;
+  font-size: 0.875rem;
+}
+.list-item-lg .pill {
+  padding: 6px 12px;
+  font-size: 0.875rem;
+}
+.list-item-lg .tag {
+  padding: 3px 10px;
+  font-size: 0.875rem;
+}
+.list-item-lg .list-item-sublabel {
+  font-size: 1rem;
+}
+
+.list-item-left-media {
+  display: flex;
+  align-items: center;
+  gap: inherit;
+  flex-shrink: 0;
+}
+
+.list-item-right-media {
+  display: flex;
+  align-items: center;
+  gap: inherit;
+  flex-shrink: 0;
+  margin-left: 12px;
+}
+
+.list-item-avatar-right .list-item-counter,
+.list-item-avatar-right .list-item-action-icon,
+.list-item-avatar-right .list-item-context-icon {
+  margin-left: 8px;
+}
+.list-item-avatar-right .list-item-right-media {
+  margin-left: auto;
+}
+
+.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 {
+  color: var(--color-success, #009B4E) !important;
+}
+.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 {
+  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 {
+  color: var(--color-primary, #4b5563) !important;
+}
+.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 {
+  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 {
+  color: var(--color-success, #15803d) !important;
+}
+.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 {
+  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 {
+  color: var(--color-danger, #991b1b) !important;
+}
+.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 {
+  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 {
+  color: var(--color-danger, #92400e) !important;
+}
+.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 {
+  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 {
+  color: var(--color-primary, #075985) !important;
+}
+.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) {
+  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) {
+  background: rgba(107, 114, 128, 0.05) !important;
+}
+.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) {
+  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) {
+  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) {
+  background: rgba(8, 145, 178, 0.05) !important;
+}
+
+.list-item-lock-icon {
+  font-size: 0.875rem;
+  color: var(--text-muted, #9ca3af);
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+.list-item-menu-icon {
+  font-size: 1rem;
+  color: var(--text-muted, #6b7280);
+  margin-left: 8px;
+  padding: 6px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.list-item-menu-icon:hover {
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--text-primary, #1f2937);
+}
+.list-item-menu-icon:active {
+  transform: scale(0.9);
+}
+
+.list-item-locked {
+  cursor: default !important;
+}
+.list-item-locked .list-item-label {
+  color: var(--text-muted, #9ca3af) !important;
+}
+.list-item-locked .list-item-icon {
+  opacity: 0.5;
+}
+.list-item-locked:hover {
+  transform: none !important;
+  background: transparent !important;
+}
+
+.swipe-actions-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  pointer-events: none;
+  z-index: -1;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.swipe-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-standard, #ffffff);
+  transition: opacity 0.2s ease;
+}
+.swipe-action ui-icon {
+  font-size: 1.5rem;
+}
+.swipe-action.left {
+  justify-content: flex-start;
+  padding-left: 24px;
+  background-color: var(--color-success, #10b981);
+}
+.swipe-action.right {
+  justify-content: flex-end;
+  padding-right: 24px;
+  background-color: var(--color-danger, #ef4444);
+}
+
+.bg-success {
+  background-color: var(--color-success, #10b981);
+}
+
+.bg-danger {
+  background-color: var(--color-danger, #ef4444);
+}
+
+.bg-warning {
+  background-color: var(--color-warning, #f59e0b);
+}
+
+.bg-info {
+  background-color: var(--color-primary, #10b981);
+}
+
+.bg-primary {
+  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;
+  text-align: center;
+  padding: 24px 16px !important;
+  border: 1px solid var(--border-subtle, #f1f5f9);
+  border-radius: 16px !important;
+  background: var(--bg-primary, #ffffff);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+}
+.list-item-grid:hover {
+  transform: translateY(-4px) !important;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  border-color: var(--color-primary, #10b981);
+}
+.list-item-grid .list-item-avatar,
+.list-item-grid .list-item-image {
+  width: 64px !important;
+  height: 64px !important;
+  margin-bottom: 16px;
+}
+.list-item-grid .list-item-content {
+  align-items: center;
+  width: 100%;
+}
+.list-item-grid .list-item-label {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.list-item-grid .list-item-collaborators {
+  margin-top: 12px;
+}
+
+.list-item-tree-lines {
+  position: relative;
+}
+.list-item-tree-lines::before {
+  content: "";
+  position: absolute;
+  left: 26px;
+  top: -12px;
+  bottom: 50%;
+  width: 2px;
+  background: var(--color-primary, #cbd5e1);
+}
+.list-item-tree-lines::after {
+  content: "";
+  position: absolute;
+  left: 26px;
+  top: 50%;
+  width: 16px;
+  height: 2px;
+  background: var(--color-primary, #cbd5e1);
+  border-radius: 0 2px 2px 0;
+}
+
+.list-item-collaborators {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.list-item.focused-item {
+  outline: 2px solid var(--color-primary, #10b981);
+  outline-offset: -2px;
+  background: var(--bg-primary, #eff6ff);
+}
+
+.list-item-avatar-container {
+  position: relative;
+  display: inline-flex;
+}
+
+.list-item-status {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--bg-primary, #ffffff);
+  z-index: 2;
+}
+.list-item-status.pos-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+.list-item-status.pos-top-right {
+  top: 0;
+  right: 0;
+}
+.list-item-status.status-online {
+  background: var(--color-success, #10b981);
+}
+.list-item-status.status-busy {
+  background: var(--color-danger, #ef4444);
+}
+.list-item-status.status-away {
+  background: var(--color-warning, #f59e0b);
+}
+.list-item-status.status-offline {
+  background: var(--color-primary, #94a3b8);
+}
+.list-item-status.status-online::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: inherit;
+  border-radius: 50%;
+  animation: pulseStatus 2s infinite;
+  opacity: 0.6;
+  left: 0;
+  top: 0;
+}
+
+@keyframes pulseStatus {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(3);
+    opacity: 0;
+  }
+}
+.list-item-progress-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+  width: 100%;
+}
+.list-item-progress-container .list-item-progress-bar {
+  height: 4px;
+  background: var(--color-primary, #10b981);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+.list-item-progress-container .list-item-progress-text {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-muted, #64748b);
+}
+
+.list-item-star-icon {
+  font-size: 0.875rem;
+  color: var(--color-primary, #cbd5e1);
+  margin-right: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.list-item-star-icon:hover {
+  color: var(--color-primary, #94a3b8);
+  transform: scale(1.1);
+}
+.list-item-star-icon.is-starred {
+  color: var(--color-warning, #f59e0b) !important;
+}
+
+.list-item-expandable-section {
+  width: 100%;
+  background: var(--bg-primary, #f8fafc);
+  overflow: hidden;
+  border-top: 1px solid var(--border-subtle, #f1f5f9);
+  animation: expandDetail 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.list-item-expandable-section .expandable-detail-content {
+  padding: 16px 24px 16px 56px;
+}
+
+@keyframes expandDetail {
+  from {
+    max-height: 0;
+    opacity: 0;
+  }
+  to {
+    max-height: 500px;
+    opacity: 1;
+  }
+}
+.list-item-media-avatar-group {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+}
+
+.list-item-right-collaborators {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  margin-right: 12px;
+}
+
+.is-wobbling {
+  animation: wobbleNo 0.4s ease-in-out;
+}
+
+@keyframes wobbleNo {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  20%, 60% {
+    transform: translateX(-4px);
+  }
+  40%, 80% {
+    transform: translateX(4px);
+  }
+}
+.list-item-pulse {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0);
+  animation: etherealPulse 2s infinite;
+  z-index: 1;
+}
+
+@keyframes etherealPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 12px rgba(var(--color-danger-rgb, 239, 68, 68), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--color-danger-rgb, 239, 68, 68), 0);
+  }
+}
+.presence-halo {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid var(--bg-primary, #ffffff);
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+.presence-halo.presence-blue {
+  background: var(--color-primary, #10b981);
+}
+.presence-halo.presence-purple {
+  background: var(--color-primary, #a855f7);
+}
+
+.list-item-density-compact {
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+  min-height: 40px;
+}
+.list-item-density-compact .list-item-sublabel,
+.list-item-density-compact .list-item-tags,
+.list-item-density-compact .list-item-progress-container {
+  display: none;
+}
+.list-item-density-compact .list-item-avatar-container,
+.list-item-density-compact ui-avatar {
+  transform: scale(0.8);
+}
+
+.list-item-density-cozy {
+  padding-top: 20px !important;
+  padding-bottom: 20px !important;
+}
+.list-item-density-cozy .list-item-label {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-primary, #0f172a);
+}
+.list-item-density-cozy .list-item-avatar-container,
+.list-item-density-cozy ui-avatar {
+  transform: scale(1.15);
+}